web-dev-qa-db-fra.com

le filtrage jquery a + pas

D'accord, j'ai des éléments de liste, certains ont une étendue, d'autres non.
Lors de mon événement, je veux ajouter la durée quand ils n'en ont pas encore.

has() fonctionne très bien, mais not() ajoute l'intervalle aux deux ??

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

Vous pouvez utiliser une combinaison des sélecteurs : not et : has comme celui-ci

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

Voici une démohttp://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>');
       }
    })    
})

Avec la méthode children(), la propriété length est utilisée pour vérifier si un span existe déjà et si ce n'est pas le cas, un est ajouté/ajouté.

Plus d'informations:

2
Sarfraz

La réponse acceptée fonctionne bien, si vous ne voulez pas filtrer uniquement les éléments qui ont les spans comme enfants directs.

Comme la boucle :has() et .has() sur tous les descendants, pas seulement les enfants.

Dans ce cas, vous devez utiliser une fonction

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

Il s'agit du premier lien sur Google lors de la recherche "jquery not has". Le scénario spécifique que je devais résoudre était un peu différent de celui-ci. J'ai dû not les éléments qui ont un élément DOM spécifique, pas simplement basé sur une balise. Cela signifiait que je ne pouvais pas utiliser un sélecteur utilisé par chaque solution ci-dessus.

jQuery has() accepte cependant un élément DOM! J'ai donc créé un plugin jQuery pour combiner ces deux fonctions intégrées.

Je voulais le partager ici parce que j'espère que cela aidera aussi les autres dans ma situation. Il répond également à la question d'origine.

Le plugin:

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

La mise en oeuvre:

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

J'avais initialement l'intention de trouver une fonction jQuery qui fonctionnerait comme addBack() mais en utilisant not à la place. Si vous avez besoin de quelque chose de si compliqué, n'hésitez pas à utiliser le plugin suivant.

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

Avec cela, la réponse serait:

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

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

1
IphStich

Essaye ça,

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