How to iterate over each element with a class name

Question

I've tried many things and I've read a lot of ways to do it but I can't make it work in my code. The thing is I want to iterate over each <li> to test if the text of <span class="state"> is running or existed then remove the class hide of a button.

So there is my HTML code:

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

And then in container.js I do that :

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

});

But it only display the button for the first <li>:

Someone could help me to figure out why I can't iterate over each "container" ?

Please edit your snippet so it actually runs. You are NOT showing HTML — mplungjan, Jan 04 '17 at 06:54
Yes includes() is like contains() it just test if the text includes a substring — Jerome, Jan 04 '17 at 06:57
Yes it is important. We cannot debug your code if it does not run — mplungjan, Jan 04 '17 at 06:57
Include comes from this answer http://stackoverflow.com/questions/1789945/how-to-check-if-one-string-contains-another-substring-in-javascript — Jerome, Jan 04 '17 at 06:58
You need to right-click and copy and format the HTML in from the browser. If it is a jQuery issue and not a Meteor issue we do not need to see Meteor. — mplungjan, Jan 04 '17 at 06:58
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/132257/discussion-between-jerome-and-mplungjan). — Jerome, Jan 04 '17 at 06:59
[IMPORTANT] I still need help for that please someone could help me ? — Jerome, Jan 04 '17 at 07:03
If I look into your code I can see that you have only 1 `
`and I have 2 maybe the problem comes from here.. — Jerome, Jan 04 '17 at 07:14
Nope. Makes no difference https://jsfiddle.net/mplungjan/f6hcg9ar/ — mplungjan, Jan 04 '17 at 07:15
Ok it will work after I change some things in my code so you can put your answer and I'll mark it as the answer :) Thank you for the help — Jerome, Jan 04 '17 at 07:21

score 3 · Accepted Answer · answered Jan 04 '17 at 07:19

The JS works - here is a cleaner version. Any remaining issue cannot be solved without seeing the rendered 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>

How to iterate over each element with a class name

1 Answers1