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

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> :

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

Answer 1

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>