web-dev-qa-db-ja.com

jqueryフィルタリングには+はありません

わかりました。リストアイテムがあります。スパンがあるものとないものがあります。
私のイベントでは、まだスパンがない場合にスパンを追加したいと思います。

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>');
    })    
})
jqueryjquery-selectorsfiltering
34
FFish

：not と ：has セレクターの組み合わせをこのように使用できます

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

これが demohttp://www.jsfiddle.net/xU6fV/ です。

86
John Hartsock
_$("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がすでに存在するかどうかを確認し、存在しない場合は追加または追加します。

詳細：

2
Sarfraz

spansを直接の子として持つ要素だけを除外したくない場合は、受け入れられた回答がうまく機能します。

: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() { /* ... */ })
1
yunzen

これは、「jquery not have」を検索したときのGoogle上の最初のリンクです。私が解決する必要がある特定のシナリオは、これとは少し異なりました。単にタグに基づくのではなく、特定のDOM要素を持つアイテムをnotする必要がありました。これは、上記の各ソリューションが使用するセレクターを使用できないことを意味しました。

jQueryの has() はDOM要素を受け入れます！そこで、これら2つの組み込み関数を組み合わせるための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関数を探すつもりでしたが、代わりにnotを使用しました。とても複雑なものが必要な場合は、次のプラグインを自由に使用してください。

_(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/

1
IphStich

これを試して、

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