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会尝试在<{1}}元素元素内找到类product 的元素。

也许您正在寻找.filter：

将匹配元素集合减少到与选择器匹配的元素或通过函数测试。

.product

Answer 2

jQuery find查找当前jQuery选择的后代。在这种情况下，$(HTML)已经是具有div类的product，因此.find('.product .listing .item')会查找前div的后代，其类为{{ 1}}。在这种情况下，使用product是正确的。

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/

JQuery - 按类选择嵌套元素

3 个答案: