如何使用类名迭代每个元素

Question

我尝试了很多东西，而且我已经阅读了很多方法，但是我无法在我的代码中使用它。问题是我想迭代每个<li>以测试<span class="state">的文本是否正在运行或存在，然后删除按钮的类隐藏。

所以有我的HTML代码：

<template name="controlPanel">
  <p>Start, stop and pause containers from this website</p>
  <input type="button" id="infosRunning" value="Get running containers infos">
  <!-- show all running containers -->
  <div>
    {{#if wantInfos}}
    <ul class="container">
        {{#each infos 'running'}}
          {{> container}}
        {{/each}}

    </ul>
    {{/if}}
  </div>
<!-- ///////////////////////////////////// -->
<input type="button" id="infosStop" value="Get stopped containers infos">
<!-- show all running containers -->
<div>
  {{#if wantInfosStop}}
  <ul class="container">
      {{#each infos 'exited'}}
        {{> container}}
      {{/each}}
  </ul>
  {{/if}}
</div>
<!-- ///////////////////////////////////// -->
</template>



<template name="container">
    <li class="liContainer">
        <div>
            <h3>{{nameContainer}}</h3>
        </div>
        <div id="textContenu">
            <span>ID: {{idContainer}}</span>
        </div>
        <div>
            <span class="state">State: {{stateContainer}}</span>
        </div>
          <button type="button" class="stop hidden">stop this container </button>
          <button type="button" class="start hidden">Start it ! </button>
    </li>
</template>

然后在container.js中我这样做：

stopOrStart = function(){
  $('.liContainer').each(function(i, obj) {
     state = $(this).find('.state');
     if(state.text().includes("running")){
       $(this).find('.stop').removeClass('hidden');
     }else{
       $(this).find('.start').removeClass('hidden');     }
   });
}
Template.container.onCreated(function containerOnCreated() {
stopOrStart();

});

但它只显示第一个<li>的按钮：

有人可以帮我弄清楚为什么我不能遍历每个＆＃34;容器＆＃34; ？

Answer 1

JS工作 - 这是一个更清洁的版本。如果没有看到呈现的HTML

，任何剩余的问题都无法解决

formula/equations

stopOrStart = function() {
  $('.liContainer').each(function() {
    var state = $(this).find('.state'),
      running = state.text().includes("running"); // ES6! .indexOf would also work
    $(this).find('.stop').toggle(running);
    $(this).find('.start').toggle(!running);
  });
}
$(function() {
  stopOrStart();
});