javascript - 如何使用类名遍历每个元素

我已经尝试了很多事情，并且已经阅读了很多方法，但是我无法使其在我的代码中起作用。问题是我想遍历每个<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>的按钮：


有人可以帮助我弄清楚为什么我不能遍历每个“容器”吗？

最佳答案

JS可以正常工作-这是一个更干净的版本。如果没有看到呈现的HTML，将无法解决所有剩余的问题

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();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="liContainer">
    <div>
      <h3>Container 1</h3>
    </div>
    <div id="textContenu">
      <span>ID: 1</span>
    </div>
    <div>
      <span class="state">State: It is stopped</span>
    </div>
    <button type="button" class="stop hidden">stop this container</button>
    <button type="button" class="start hidden">Start it !</button>
  </li>
</ul>
<ul>
  <li class="liContainer">
    <div>
      <h3>Container 2</h3>
    </div>
    <div id="textContenu">
      <span>ID: 2</span>
    </div>
    <div>
      <span class="state">State: It is running</span>
    </div>
    <button type="button" class="stop hidden">stop this container</button>
    <button type="button" class="start hidden">Start it !</button>
  </li>
</ul>
<ul>
  <li class="liContainer">
    <div>
      <h3>Container 3</h3>
    </div>
    <div id="textContenu">
      <span>ID: 3</span>
    </div>
    <div>
      <span class="state">State: It is stopped</span>
    </div>
    <button type="button" class="stop hidden">stop this container</button>
    <button type="button" class="start hidden">Start it !</button>
  </li>
</ul>
<ul>
  <li class="liContainer">
    <div>
      <h3>Container 4</h3>
    </div>
    <div id="textContenu">
      <span>ID: 4</span>
    </div>
    <div>
      <span class="state">State: It is running</span>
    </div>
    <button type="button" class="stop hidden">stop this container</button>
    <button type="button" class="start hidden">Start it !</button>
  </li>
</ul>