jquery 过滤有 +不是

Question

好的，我有列表项，有些有跨度，有些没有。
在我的活动中，当他们还没有跨度时，我想添加跨度。

has() 工作正常，但 not() 将跨度添加到两者？

HTML：

<ul>
    <li>
        <p>item</p>
        <span class="spn">empty span</span>
    </li>
    <li>
        <p>item 2</p>
    </li>
<ul>
<hr>
<a class="add-span"href="#">check</a>

JS：

$("a.add-span").click(function() {
    $("li").each(function(index) {
        // $(this).has("span").find("span").append(" - appended");
        $(this).not("span").append('<span class="spn">new span<\/span>');
    })    
})

Answer 1

您可以结合使用 :not 和 :has 像这样的选择器

$("a.add-span").click(function() {
    $("li:not(:has(span))").each(function(index) {
        $(this).append('<span class="spn">new span<\/span>');
    });
});

这是一个 演示 http://www.jsfiddle.net/xU6fV/

Answer 2

$("a.add-span").click(function() {
    $("li").each(function(index) {
       if ($(this).children('span').length === 0){
         $(this).append('<span class="spn">new span<\/span>');
       }
    })    
})

对于 children() 方法，length 属性用于检查 span 是否已存在，如果不存在，则为添加/附加。

更多信息：

• http://api.jquery.com/length/
• http://api.jquery.com/children/

Answer 3

如果您不想仅过滤掉那些将 span 作为直接子元素的元素，则接受的答案效果很好。

由于 :has() 和 .has() 循环遍历所有后代，而不仅仅是子代。

在这种情况下，你必须使用一个函数

$("li").not(function() {
    // returns true for those elements with at least one span as child element
    return $(this).children('span').length > 0 
}).each(function() { /* ... */ })

Answer 4

这是搜索“jquery not has”时 Google 上的第一个链接。我需要解决的具体场景与此略有不同。我必须 not 具有特定 DOM 元素的项目，而不仅仅是基于标签。这意味着我无法使用上面每个解决方案使用的选择器。

然而，jQuery 的 has() 确实接受 DOM 元素！所以我创建了一个 jQuery 插件来组合这两个内置函数。

我想在这里分享它，因为希望它也能帮助其他处于我这种情况的人。这也回答了原来的问题。

插件：

(function ( $ ) {
    $.fn.extend({
        not_has: function (param) {
            return this.not(this.has(param));
        }
    });
}( jQuery ));

实现：

$("a.add-span").click(function() {
    $("li").not_has("span")
    .append('<span class="spn">new span<\/span>');

    // Prevent the page from navigating away
    return false;
});

https://jsfiddle.net/brjkg10n/1/

---

我最初打算找到一个像 addBack() 但使用的 jQuery 函数不是。如果您需要如此复杂的东西，请随意使用以下插件。

(function ( $ ) {
    $.fn.extend({
        notBack: function () {
            return this.prevObject.not(this);
        }
    });
}( jQuery ));

有了这个，答案将是：

$("li").has("span").notBack()
.append('<span class="spn">new span<\/span>');

https://jsfiddle.net/2g08gjj8/1/

Answer 5

试试这个，

$("a.add-span").click(function() {
    $("li:not(:has(span))").each(function(index) {
        $(this).append($("<span class='spn'>").html("Newly Added Span"));
    });
});