jQuery-按類選擇嵌套元素

Question

我想通過類名選擇li元素，但是它不能按我的要求工作。 請參見以下代碼：

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!

為什么我無法選擇商品產品類別？

Answer 1

由於.product是所選元素之一，因此它是頂級元素。 .find將設法找到類元素product 里面 .product元素。

也許您正在尋找.filter ：

將匹配元素的集合減少到與選擇器匹配或通過功能測試的元素。

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

Answer 2

jQuery find查找當前jQuery選擇的后代。 在這種情況下， $(HTML)已經是具有product類的div ，因此.find('.product .listing .item')將查找具有product類的頂級div后代。 在這種情況下，使用.find('.listing .item')是正確的。

Answer 3

我不確定這是您要找的東西嗎？

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

請參閱小提琴http://jsfiddle.net/s1s3zjdL/