Jquery-Filterung hat + nicht

Okay ich Liste posten, einige haben eine Spanne, einige nicht.
Auf meiner Veranstaltung möchte ich hinzufügen, dass die Spanne, wenn Sie gar keine haben noch.

has() funktioniert gut, aber not() fügt dem span-Tag??

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

InformationsquelleAutor der Frage FFish | 2010-10-28

  1. 73

    Können Sie eine Kombination der :nicht und :hat Selektoren wie diese

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

    Hier ist ein demo http://www.jsfiddle.net/xU6fV/

    InformationsquelleAutor der Antwort John Hartsock

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

    Mit children() Methode, die length - Eigenschaft wird verwendet, um zu überprüfen, ob oder nicht eine span bereits vorhanden ist und falls nicht, wird eines Hinzugefügt/angehängt.

    Mehr Info:

    InformationsquelleAutor der Antwort Sarfraz

  3. 1

    Akzeptierte Antwort funktioniert gut, wenn Sie nicht wollen, heraus zu filtern und nur die Elemente, die zu tun haben, die spans als direkte Kinder.

    Als :has() und die .has() Schleife über alle Nachkommen, nicht nur die Kinder.

    In diesem Fall müssen Sie eine Funktion verwenden,

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

    InformationsquelleAutor der Antwort HerrSerker

  4. 0

    Versuchen, diese,

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

    InformationsquelleAutor der Antwort Rashmin Javiya

  5. 0

    Dies ist der erste link bei Google bei der Suche "jquery nicht hat". Die spezifischen Szenario, das ich brauchte, um zu lösen, war ein wenig anders. Ich musste not Elemente, die ein bestimmtes DOM-element, nicht einfach auf einen tag. Dies bedeutete, dass ich konnte nicht mithilfe einer Auswahl, die jede Lösung, die oben verwendet.

    jQuery () jedoch akzeptiert ein DOM-element! Also schuf ich ein jQuery-plugin, um kombinieren Sie diese beiden eingebauten Funktionen.

    Wollte ich Teile es hier, weil ich hoffe, es wird helfen, andere in meiner situation auch. Es gibt auch die Antwort der ursprünglichen Frage.

    Plugin:

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

    Umsetzung:

    $("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/

    Ich war zunächst in der Absicht zu finden, die eine jQuery-Funktion, die funktionieren würde, wie addBack() aber mit not statt. Wenn Sie etwas brauchen, so kompliziert, dann nutzen Sie bitte das folgende plugin.

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

    Mit dabei, die Antwort wäre:

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

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

    InformationsquelleAutor der Antwort IphStich

Schreibe einen Kommentar