CODEWITHSUNDEEP
jquerylistloopseach
Filip Breckx
Filip Breckx

Reputation: 55

jQuery loop through list-item and check child value

I'm trying to loop through some list items and check for the value of the child field ".price". This is the code I'm using.

var item = jQuery(".product_overview li")

jQuery(item).each(function() {
var itemPrice = jQuery(".product_overview li .price").html();
alert(itemPrice);  
});

But every loop gives me the value of the first child..

HTML

<ul class="product_overview">
<li><span class="price">20</span></li>
<li><span class="price">40</span></li>
<li><span class="price">60</span></li>
</ul>

Upvotes: 0

Views: 1828

Answers (3)

Exception
Exception

Reputation: 8389

If you want all the prices in an Array,

var prices = $.map($('.product_overview li'), function(){
    return this.querySelector('.price').innerHTML;
});

Upvotes: 0

j08691
j08691

Reputation: 208012

Change your code to:

var item = jQuery(".product_overview li")
jQuery(item).each(function() {
    var itemPrice = jQuery(this).find(".price").html();
    alert(itemPrice);  
});

Or just rewrite the whole thing to:

jQuery(".product_overview li .price").each(function () {
    console.log(jQuery(this).html());
});

jsFiddle example

Upvotes: 2

Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67217

Try to use the this reference as the context to that selector,

jQuery(item).each(function() {
  var itemPrice = jQuery(".price",this).html();
  alert(itemPrice);  
});

DEMO

And as a special not you have missed one s in the class attribute of the UL element clas="product_overview", try to correct that in your code.

Upvotes: 4

Related Questions