Comment enchaîner ce code ?

Question

J'ai ce code :

$("#test").siblings('p').remove();
$("#test").remove();

Comment puis-je enchaîner ce code au lieu de l'écrire séparément ?

Answer 1

Vous voulez utiliser addBack() dans ce cas :

$("#test").siblings('p').addBack().remove();

---

EDIT

Tout d'abord, pour les futurs visiteurs, si vous utilisez jQuery version 1.8-, vous devez probablement utiliser etSelf() qui est le prédécesseur de addBack() pour les problèmes de compatibilité.

Deuxièmement, les deux end y addBack effectueront la même tâche dans ce cas, mais il s'agit en fait d'une perspective différente. Jetez un coup d'oeil à ce HTML :

<div class="grandpa">
    <div class="dad">
        <div class="son">
            Test
        </div>
    </div>
</div>

Si nous utilisons end() :

$('.grandpa')
    .find('.dad')
        .find('.son')
        .addClass('youngster')
        .end()
    .addClass('adult')
    .end()
.addClass('oldster');

Le résultat ressemblera à ceci :

<div class="grandpa oldster">
    <div class="dad adult">
        <div class="son youngster">
            Test
        </div>
    </div>
</div>  

Ainsi, lorsque nous utilisons end() para son nous disons à jQuery qu'il doit revenir en arrière à partir de son à l'ensemble des parents qui est dad et ajouter la classe adult .

Mais lorsque nous utilisons addBack :

$('.grandpa')
    .find('.dad')
        .find('.son')
        .addClass('youngster')
        .addBack()
        .addClass('adult')
        .addBack() // This simply do nothing since `addBack` is not traverse up DOM element 
        .addClass('oldster');    

ce qui aboutira à ceci :

<div class="grandpa">
    <div class="dad adult oldster">
        <div class="son youngster adult oldster">
            Test
        </div>
    </div>
</div>

Donc quand on appelle addBack en son nous disons à jQuery de pousser dad y son dans la même pièce et ajouter une nouvelle classe adult y oldster à tous les deux.

Answer 2

El end() est surtout utile pour exploiter les propriétés de chaînage de jQuery. Lorsque l'on n'utilise pas le chaînage, on peut généralement se contenter d'appeler une méthode précédente object par nom de variable, donc nous n'avons pas besoin de manipuler la pile.

Le nouvel ensemble d'éléments est poussé sur une pile qui est maintenue à l'intérieur de la fonction object . Chaque méthode de filtrage successive pousse un nouvel ensemble d'éléments sur la pile. Si nous avons besoin d'un ensemble d'éléments plus ancien, nous pouvons utiliser la méthode suivante end() pour retirer les jeux de la pile.

Je suppose qu'avec l'utilisation de .end() comme ça :

$("#test").siblings('p').remove().end().remove();

Vous pouvez trouver un violon

---

Une explication :

Maintenant, que se passe-t-il avec le code ci-dessus :

Supposons que ce balisage HTML :

<div id='container'>
   <div id='test'>This is supposed to be removed.</div>
   <p>And this to be removed too.</p>
</div>

lorsque script s'exécute :

$("#test").siblings('p').remove()

ce bloc supprime l'élément frère <p> de la vue, alors le balisage sera mis à jour comme suit :

<div id='container'>
   <div id='test'>This is supposed to be removed.</div>
</div>

et si nous l'enchaînons avec .end()

$("#test").siblings('p').remove().end()

il retourne à la pile à #test puis la partie suivante du script est lancée.

$("#test").siblings('p').remove().end().remove();
                             //--^^^^^^^^^^^^^^^----this next part

et #test est supprimé de la vue et votre sortie finale de balisage sera comme :

<div id='container'>
</div>

Answer 3

Peut être hors sujet vous pouvez changer la vision du problème :

$("#test, #test ~ p").remove(); // !! incorrect way, see comment below

Les gars, désolé :( ma décision n'est pas correcte ! !!

Sélecteur ' ~ n'est pas égal à frère et sœur '-méthode. ' ~ ' sélectionne tous les frères et soeurs ' p Les éléments qui suivent APRÈS le #test élément ".

Donc je suggère une autre décision :

$("#test, > p", $('#test').parent()).remove();

Ce n'est pas assez élégant mais c'est le moyen le plus rapide. Veuillez le vérifier. http://jsperf.com/how-to-chain-this-code-stackoverflow-16009101 '

Résultat du test de performance :

PS http://jsfiddle.net/Dpe59/

Answer 4

Je dois être d'accord avec le commentaire sur la question ; pour la lisibilité et la maintenabilité, utiliser andSelf :

$("#test").siblings('p').andSelf().remove();

Malheureusement, il a été déprécié. Mais si vous êtes coincé sur une version plus ancienne de jquery comme nous, il mai être utile.

Answer 5

$("#text").siblings('p').remove().prevObject.remove();

éditer : Bien que cela fonctionne, ne le faites pas, comme le dit le commentaire de Matt, prevObject est sans document