jquery - obtener - Cómo seleccionar el padre de un elemento y los hermanos del padre

padre de elemento jquery

Question

Tengo este código:

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

¿Cómo puedo encadenar este código en lugar de escribirlo por separado?

Answer 1

Desea utilizar addBack() en este caso:

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

EDITAR

En primer lugar, para los visitantes futuros, si está utilizando jQuery versión 1.8-, probablemente necesite usar andSelf() que es el predecesor de addBack() para problemas de compatibilidad.

En segundo lugar, tanto end como addBack harán la misma tarea en este caso, pero en realidad son perspectivas diferentes. Eche un vistazo a este HTML:

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

Si estamos usando end() :

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

El resultado se verá así:

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

Entonces, cuando usamos end() para son , le estamos diciendo a jQuery que tiene que volver de son a padre, que es dad y agregar clase adult .

Pero cuando usamos 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'');    

que resultará en esto:

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

Así que cuando llamamos a addBack en son , le estamos diciendo a jQuery que empujen a dad e son a la misma habitación y les agreguen a los dos nuevos adult y oldster clase.

Answer 2

El método end() es útil principalmente cuando se explotan las propiedades de encadenamiento de jQuery. Cuando no usamos el encadenamiento, generalmente podemos llamar un object anterior por nombre de variable, por lo que no necesitamos manipular la pila.

El nuevo conjunto de elementos se inserta en una pila que se mantiene dentro del object . Cada método de filtrado sucesivo empuja un nuevo conjunto de elementos a la pila. Si necesitamos un conjunto de elementos más antiguo, podemos usar end() para sacar los conjuntos de la pila.

Supongo que con el uso de .end() como este:

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

Puedes encontrar un fiddle

Alguna explicación:

Ahora, qué está sucediendo con este fragmento de código anterior:

Supongamos que este marcado HTML:

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

cuando el script se ejecuta:

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

este bloque elimina el elemento hermano <p> de la vista, luego el marcado se actualizará como:

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

y si lo encadenamos con .end()

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

vuelve a la pila en #test div y luego se #test la siguiente parte del script

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

y #test se elimina de la vista y su resultado de marcado final será como:

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

Answer 3

Prueba esto :

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

Answer 4

Puede estar fuera de tema ... puede cambiar la vista del problema:

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

Chicos lo siento :( mi decisión no es correcta !!

Selector '' ~ '' no es igual '' hermano '' -metodo. '' ~ '' selecciona todos los elementos hermanos '' p '' que siguen DESPUÉS del elemento '' #test ''.

Entonces sugiero otra decisión:

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

No es lo suficientemente elegante, pero la forma más rápida. Por favor http://jsperf.com/how-to-chain-this-code--16009101 '' http://jsperf.com/how-to-chain-this-code--16009101 ''

Resultado de la prueba de rendimiento:

PD http://jsfiddle.net/Dpe59/

Answer 5

Tengo que estar de acuerdo con el comentario sobre la pregunta; para legibilidad y mantenibilidad, uso y andSelf() :

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

Desafortunadamente, ha sido desaprobado. Pero si estás atrapado en una versión anterior de jquery como nosotros, puede valer la pena.

Answer 6

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

Answer 7

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

editar: Aunque esto funciona, no hagas esto. como dice el comentario de Matt, el prevObject no está documentado