jQuery-按类选择嵌套元素

Question

I want to select li elements by class names but it's not working as I want. See the following code:

var HTML = '<div class="product">' +
    '<ul class="listing">' +
    '<li class="item">1</li>' +
    '<li class="item">2</li>' +
    '<li class="item">3</li>' +
    '<li class="item">4</li>' +
    '<li class="item">5</li>' +
    '</ul>' +
    '</div>';


alert($(HTML).find('.product .listing .item').html()); //does not work
alert($(HTML).find('.listing .item').html()); //WORKS!

Why I am not able to select items product class?

Answer 1

Because .product is one of the selected elements, it's a top level element. .find would try to find the elements with class product inside the .product element.

Maybe you are looking for .filter :

Reduce the set of matched elements to those that match the selector or pass the function's test.

alert($(HTML).filter('.product').find('.listing .item').html());

Answer 2

jQuery find looks for descendents of the current jQuery selection. In this case, $(HTML) is already the div with the product class, so .find('.product .listing .item') would look for descendents of the top div with the class of product . In this case, using .find('.listing .item') is correct.

Answer 3

i am not sure if this is something you're looking for?

var HTML = '<div class="product">' +
    '<ul class="listing">' +
    '<li class="item">1</li>' +
    '<li class="item">2</li>' +
    '<li class="item">3</li>' +
    '<li class="item">4</li>' +
    '<li class="item">5</li>' +
    '</ul>' +
    '</div>';


alert($('.item', HTML));

please see the fiddle http://jsfiddle.net/s1s3zjdL/