Que fait la fonction .end () dans JQuery?

Question

J'ai déjà lu cette page Web http://docs.jquery.com/Traversing/end mais je n'ai toujours aucune idée de ce que fait réellement .end (). Comment est-ce et comment l'utilisez-vous. Je suis aussi en train de lire un livre, mais il glisse légèrement sur .end () et ne donne aucun exemple de son utilité. Quelqu'un peut-il clarifier?

Answer 1

$("body").find("span").css("border", "2px red solid");

vs

$("body").find("span").end().css("border", "2px red solid");

Exécuter ces déclarations séparément dans la console de Firebug sur cette page exacte, et remarquez comment les différents comportements. Fondamentalement, .end() le raconte à aller en arrière sur le corps après la recherche de tous les travées, et appliquer la frontière de corps, pas les les travées. Si nous n'avons pas l' .end() il y, le jQuery, le code de coeur se comporte normalement et s'applique à l' .css() notre span d'éléments à l'intérieur du corps.

BODY > SPAN > APPLY BORDER TO SPANS

avec end() il devient

BODY > SPAN > GO BACK TO BODY > APPLY BORDER TO BODY

L' find() est une opération destructrice, ce qui signifie des changements quels éléments sont à l'intérieur de votre jquery objets de tableau.

$('body')

notre élément courant est le corps

$('body').find('span')

nous avons utilisé une opération destructrice find() qui change toute notre collection d'objets à être rempli avec s'étend à l'intérieur du corps, le corps n'est plus dans la collection

$('body').find('span').end()

parce que trouver un "destructeur" de l'opération elle revient avant que nous n' .find(), essentiellement de l'onu-ne ou ctrl-Z est la dernière chose qui a changé nos jquery collection.

Answer 2

Cela revient essentiellement à l'ensemble parent. Par exemple:

 $('.tree')
    .find('.branch')
        .find('.leaf')
        .addClass('tacks-onto-leaf')
        .end()
    .addClass('tacks-onto-branch')
    .end()
.addClass('tacks-onto-tree');
 

Answer 3

Il sauvegarde la "portée" d'une instruction JQuery chaînée au niveau précédent.

Balises dans l'objet jQuery initialement [$ ('P')]: P, P

Tags dans l'objet jQuery après find [$ ('P'). Find ('SPAN')]: SPAN, SPAN, SPAN, SPAN, SPAN

Tags dans l'objet jQuery après la fin [$ ('P'). Find ('SPAN'). End ()]: P, P

 $('span')              //all <span> tags in the doc
  .find('#foo')          //all <span> with id foo
    .addClass('blinkyRed') //adds class blinkyRed <span id='foo'> 
  .end()                 //reverts scope to all <span> tags
.addClass('Bold')      //adds class Bold to all <span> tags
 

Answer 4

Il permet à la "portée" à la fin et sera ré-défini. Par exemple, disons que vous avez une certaine HTML comme:

<div id="people">
 <ul>
   <li>A</li>
   <li>B</li>
 </ul>
 <ul>
   <li>C</li>
   <li>D</li>
  </ul>
</div>

Vous pourriez d'abord sélectionner le parent par :

$('#people')

Et modifiez les enfants ul éléments comme

#('#people').find('ul').css('border', '1px solid #f00')

Mais ce qui s'est passé, si vous vouliez continuer à modifier l'élément parent (nombre de personnes)? Vous pourriez commencer un nouveau finder $('#de personnes") ou tout simplement de la chaîne d'elle à la première ligne, précédé d'une .fin() pour notifier jQuery que vous souhaitez pour "fermer" le find() et de la portée de la recherche retour à la précédente trouver (implicity l' $('#de personnes"), comme ceci)

#('#people').find('ul').css('border', '1px solid #f00').end().css('border', '1px dashed #00f')

De sorte que la ligne serait: prenez tout de l'enfant UL de nombre de personnes, le changement de leurs frontières, de rouge et de modifier ensuite la frontière de la société mère nombre de personnes de l'élément de pointillés et de bleu.

Answer 5

Les fonctions suivantes peuvent être utilisées pour modifier votre sélection jQuery, généralement pour rendre votre sélection plus spécifique, ou inclusive / exclusive:

add, andSelf, children, filter, find, map, next, nextAll, not, parent, parents, prev, prevAll, frères et soeurs, tranche, clone, appendTo, prependTo, insertBefore, insertAfter ou replaceAll

.end() peut être utilisé pour réinitialiser votre sélection à votre ensemble d’éléments d’origine, après avoir effectué quelques manipulations sur la sélection étendue.