end - jquery parent

¿Qué hace la función.end() en jQuery?

Question

Ya he leído esta página web http://api.jquery.com/end/ pero todavía no tengo ni idea de lo que .end () realmente hace. ¿Para qué sirve y cómo lo usas?

También estoy leyendo un libro de jQuery, pero ve ligeramente .end () y no da ningún ejemplo de para qué sirve. ¿Alguien puede aclarar?

Answer 1

Básicamente se remonta al conjunto principal. Por ejemplo:

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

Answer 2

Las siguientes funciones se pueden usar para modificar su selección de jQuery, por lo general, para que su selección sea más específica o inclusiva / exclusiva:

add, andSelf, children, filter, find, map, next, nextTodo, no, parent, parents, prev, prevAll, brothers, slice, clone, appendTo, prependTo, insertBefore, insertAfter, o replaceAll

.end() se puede utilizar para restablecer su selección a su conjunto original de elementos, después de haber hecho alguna manipulación en la selección extendida.

Answer 3

Permite que el "alcance" actual termine y se redefina. Por ejemplo, digamos que tiene algo de HTML como:

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

Primero puede seleccionar el padre por:

$(''#people'')

Y modifique los elementos ul de los niños como

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

Pero, ¿qué pasó si quería continuar editando el elemento padre (#personas)? Podría iniciar un nuevo buscador $ (''# personas'') o simplemente encadenarlo a la primera línea, precedido por un .end () para notificar a jQuery que desea "cerrar" el find () y llevar el alcance de la búsqueda al anterior a encontrar (implicidad $ (''# personas''), como tal)

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

Entonces esa línea: agarraría a todo el niño UL de #personas, cambiaría sus bordes a rojo y luego cambiaría el borde del elemento padre #personal por discontinuo y azul.

Answer 4

Respalda el "alcance" de una declaración JQuery encadenada al nivel anterior.

Etiquetas en el objeto jQuery inicialmente [$ (''P'')]: P, P

Etiquetas en el objeto jQuery después de encontrar [$ (''P''). Find (''SPAN'')]: SPAN, SPAN, SPAN, SPAN, SPAN

Etiquetas en el objeto jQuery después del final [$ (''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 5

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

vs

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

Ejecute estas instrucciones por separado en la consola de Firebug en esta página exacta, y observe cuán diferentes son los comportamientos. Básicamente, .end() le dice que regrese al cuerpo después de encontrar todos los tramos y aplique el borde al cuerpo, no los tramos. Si no tenemos el .end() allí, el código jQuery básicamente se comporta normalmente y aplica el .css() a nuestros elementos span dentro del cuerpo.

BODY > SPAN > APPLY BORDER TO SPANS

con end() se convierte

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

El find() es una operación destructiva, lo que significa que cambia qué elementos están dentro de su matriz de objetos jquery.

$(''body'') 

nuestro elemento actual es el cuerpo

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

utilizamos una operación destructiva find() que cambia toda nuestra colección de objetos para ser poblada con tramos dentro del cuerpo, el cuerpo ya no está en la colección

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

porque find es una operación "destructiva" a la que vuelve antes que nosotros .find() , básicamente un-does o ctrl-Z es lo último que cambió nuestra colección jquery.