jquery 过滤有 + 没有
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4045431/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery filtering has + not
提问by FFish
Okay I have list items, some have a span, some not.
On my event I want to add the span when they don't have any yet.
好的，我有列表项，有些有跨度，有些没有。
在我的活动中，我想在他们还没有时添加跨度。
has()works fine, but not()adds the span to both??
has()工作正常，但not()增加了跨度？
HTML:
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:
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>');
})
})
回答by John Hartsock
You can use a combination of the :notand :hasselectors like this
$("a.add-span").click(function() {
$("li:not(:has(span))").each(function(index) {
$(this).append('<span class="spn">new span<\/span>');
});
});
Here is a demohttp://www.jsfiddle.net/xU6fV/
回答by Sarfraz
$("a.add-span").click(function() {
$("li").each(function(index) {
if ($(this).children('span').length === 0){
$(this).append('<span class="spn">new span<\/span>');
}
})
})
With children()method, the lengthproperty is used to check whether or not a spanalready exits and if it doesn't, one is added/appended.
使用children()方法，该length属性用于检查 a 是否span已经存在，如果没有，则添加/附加一个。
More Info:
更多信息：
回答by yunzen
The accepted answer works well, if you don't want to filter out only those elements which do have the spans as direct children.
如果您不想只过滤掉那些确实将spans 作为直接子元素的元素，那么接受的答案很有效。
As the :has()and the .has()loop over all descendants, not just the children.
作为:has()和.has()循环遍历所有后代，而不仅仅是孩子。
In that case, you have to use a function
在这种情况下，你必须使用一个函数
$("li").not(function() {
// returns true for those elements with at least one span as child element
return $(this).children('span').length > 0
}).each(function() { /* ... */ })
回答by IphStich
This is the first link on Google when searching "jquery not has". The specific scenario I needed to solve was a little different to this one. I had to notitems that have a specific DOM element, not simply based on a tag. This meant I couldn't use a selector which each solution above used.
这是搜索“jquery not has”时谷歌上的第一个链接。我需要解决的具体场景与这个有点不同。我必须not拥有具有特定 DOM 元素的项目，而不仅仅是基于标签。这意味着我不能使用上面每个解决方案都使用的选择器。
jQuery's has()however does accept a DOM element! So I created a jQuery plugin to combine these two inbuilt functions.
has()然而，jQuery确实接受 DOM 元素！所以我创建了一个 jQuery 插件来组合这两个内置函数。
I wanted to share it here because hopefully it will help others in my situation too. It also answers the original question.
我想在这里分享它，因为希望它也能帮助我的情况下的其他人。它还回答了原始问题。
The Plugin:
插件：
(function ( $ ) {
$.fn.extend({
not_has: function (param) {
return this.not(this.has(param));
}
});
}( jQuery ));
Implementation:
执行：
$("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/
https://jsfiddle.net/brjkg10n/1/
I was initially intending to find a jQuery function that would work like addBack()but using notinstead. If you need something so complicated, then please feel free to use the following plugin.
我最初打算找到一个 jQuery 函数，它可以像addBack()使用一样工作，但可以使用它not。如果你需要这么复杂的东西，那么请随意使用以下插件。
(function ( $ ) {
$.fn.extend({
notBack: function () {
return this.prevObject.not(this);
}
});
}( jQuery ));
With this, the answer would be:
有了这个，答案是：
$("li").has("span").notBack()
.append('<span class="spn">new span<\/span>');
回答by Rashmin Javiya
Try this,
尝试这个，
$("a.add-span").click(function() {
$("li:not(:has(span))").each(function(index) {
$(this).append($("<span class='spn'>").html("Newly Added Span"));
});
});
