Escenario: Insertar un elemento con el mismo nombre de clase que el elemento seleccionado.

En este escenario, se intenta insertar una lista cuando hay seleccionado un elemento de una lista.

Elemento insertado:

<ul class="nav">
   <li class="item"> Sale </li>
   <li> class="item"> Offers </li>
</ul>

Seleccionado

<li class="women-section">Women</li>

Selector: #wrap > ul.nav:eq(0) > li.women-section:eq(0)

Resultado:

El selector no funciona porque ul.nav:eq(0) proporciona un elemento añadido dinámicamente. El elemento no estará disponible y la acción no se aplicará. Cuando, después de crear una actividad, se añade un elemento de lista similar con la misma clase de manera dinámica o manual, se crea un nuevo elemento en la primera posición. Esto interrumpe el selector.

Antes de registrar los valores de:

<div id="wrap">
    <ul class="nav">
        <li class="men-section"> Men</li>       <li class="women-section">Women</li>
    </ul>
</div>

Después (intentado):

<div id="wrap">
     <ul class="nav">
        <li class="item"> Sale</li>
        <li> class="item"> Offers</li>
     </ul>
     <ul class="nav">
       <li class="men-section"> Men</li>
       <li class="women-section">Women</li>
    </ul>
</div>

Escenario: Insertar un elemento después del elemento seleccionado

En este escenario, se inserta un elemento de lista después del elemento seleccionado.

Elemento insertado:

<ul class="nav">
   <li class="men-section"> Men Clothes</li>
   <li class="women-section"> Women Clothes</li>
</ul>

Seleccionado:

<li class="women-section">Women Shoes</li>

Selector: #wrap > ul.nav:eq(0) > li.women-section:eq(0)

Resultado:

En este caso, insertar una lista después del final de la lista con el elemento de lista seleccionado funciona según lo esperado. El nuevo elemento se añade en la misma posición que el elemento seleccionado, con respecto al elemento principal.

Antes de registrar los valores de:

<div id="wrap">
    <ul class="nav">
        <li class="men">Men Shoes </li>       <li class="women">Women Shoes</li>
    </ul>
</div>

Después:

<div id="wrap">
    <ul class="nav">
        <li class="men">Men Shoes </li>
        <li class="women">Women Shoes</li>
    </ul>
      <ul class="nav">
        <li class="men-section">Men Clothes</li>
        <li class="women-section"> Women Clothes</li>
    </ul>
</div>

Escenario: Quitar el elemento que hay justo antes de otro elemento

En este escenario, se quita el elemento de lista situado justo antes del elemento seleccionado.

Elemento quitado:

<li class="men-section"> Men </li>

Seleccionado:

<li class="women-section">Women</li>

Selector: #wrap > ul.nav:eq(0) > li.women-section:eq(0)

Resultado:

El elemento se quita correctamente porque la clase del elemento seleccionado no se altera.

Antes de registrar los valores de:

<div id="wrap">
    <ul class="nav">
        <li class="men-section">Men</li>
        <li class="women-section">Women</li>
    </ul>
</div>

Después:

<div id="wrap">
    <ul class="nav">
        <li class="women-section">Women</li>
    </ul>
</div>

Escenario: Quitar el elemento que hay justo después de otro elemento

En este escenario, se quita el elemento de lista situado justo después del elemento seleccionado.

Elemento quitado:

<li class="kids-section">Kids</li>

Seleccionado:

<li class="women-section">Women</li>

Selector: #wrap > ul.nav:eq(0) > li.women-section:eq(0)

Resultado:

El elemento se quita correctamente porque la clase del elemento seleccionado no se altera. El elemento quitado incluye una clase única dentro del subárbol principal.

Antes de registrar los valores de:

<div id="wrap">
    <ul class="nav">
        <li class="men-section">Men</li>
        <li class="women-section">Women</li>
        <li class="kids-section">Women</li>
    </ul>
</div>

Después:

<div id="wrap">
    <ul class="nav">
        <li class="men-section">Men</li>
        <li class="women-section">Women</li>
    </ul>
</div>

Escenario: Quitar el elemento seleccionado

En este escenario, se elimina el elemento de lista seleccionado.

Elemento quitado:

<li class="women-shoes">Women</li>

Seleccionado:

<li class="women-shoes">Women</li>

Selector: #wrap > ul.nav:eq(0) > li.women-section:eq(0)

Resultado:

El elemento se quita correctamente.

Antes de registrar los valores de:

<div id="wrap">
    <ul class="nav">
        <li class="men-section">Men</li>
        <li class="women-shoes">Women</li>
    </ul>
</div>

Después

<div id="wrap">
    <ul class="nav">
       <li class="men-section">Men</li>
    </ul>
</div>

Escenario: Cambiar el nombre de la clase del elemento seleccionado

En este escenario, se cambia la clase del elemento de lista seleccionado.

Elemento cambiado:

<li class="women-section">Women</li>

Seleccionado:

<li class="women-section">Women</li>

Selector: #wrap > ul.nav:eq(0) > li.women-section:eq(0)

Resultado:

No se puede cambiar el nombre de la clase del elemento porque no se encuentra la class.

Antes de registrar los valores de:

<div id="wrap">
    <ul class="nav">
        <li class="men-section">Men</li>
        <li class="women-section">Women</li>
    </ul>
</div>

Después (intentado):

<div id="wrap">
    <ul class="nav">
        <li class="men-section">Men</li>
        <li class="women-shoes">Women</li>
    </ul>
</div>

Target