How to iterate through a set of heterogeneous elements?

Question

I want to iterate through a few HTML elements and get their values. I tried using $.each() for this but I can't figure out how to do it when an element has other elements of variable types inside it. I have the HTML DOM structure as :

<li>
 <div>X</div>
 <br/>
 <span>Category : </span>
 <div>Y</div>
 <span><br/>Rating</span>
 <div>
 <span>Z</span>
</div>

I want to retrieve the values X , Y , Z from it. Also there are multiple instances of this so I will have to iterate through each of them. Can anyone suggest some approach to this?

Why not give each element you are interested in an ID (or a class) and then select by ID/class? — helpermethod, Nov 11 '13 at 10:44
http://stackoverflow.com/questions/298750/how-do-i-select-text-nodes-with-jquery — Johanna Larsson, Nov 11 '13 at 10:45
@Prinzhorn ok I'm not very good with this but I'm pretty sure `div` is allowed inside `li`. — Aneesh, Nov 11 '13 at 10:50

score 1 · Answer 1 · answered Nov 11 '13 at 10:44

1

Looks like you are reading the text content of all div elements within the li. So try

$('li').children('div').each(function(){
    console.log($(this).text())
})

answered Nov 11 '13 at 10:44

Arun P Johny

376,738
64
519
520

But "Z" is in a span...although I s'pose that span is inside a div. – nnnnnn Nov 11 '13 at 10:49
@nnnnnn it looks like the span is wrapped in a div – Arun P Johny Nov 11 '13 at 10:50

score 1 · Answer 2 · answered Nov 11 '13 at 10:46

Assign the elements you are interested in to a class:

<li>
 <div class="value">X</div>
 <br/>
 <span>Category : </span>
 <div class="value">Y</div>
 <span><br/>Rating</span>
 <div>
 <span class="value">Z</span>
</div>

Then select values by class:

$('.values').each(function() {
  console.log($(this).text())
})

Toni Michel Caubet · Answer 3 · 2013-11-12T18:21:37.173

1

or

$('li > div').each(function(){
    console.log($(this).text())
})

-EDIT-

If you don't want any content inside those spans, you could try:

$('li > div').each(function(){
      var $tmp =  $(this).clone();
      $tmp.find('span').remove();
      console.log($tmp.text());

})

edited Nov 12 '13 at 18:21

answered Nov 11 '13 at 10:46

Toni Michel Caubet

18,208
50
194
356

How to iterate through a set of heterogeneous elements?

3 Answers3