Los escenarios de este tema muestran cómo afectan los cambios realizados en la página a la capacidad de Adobe Target para mostrar una experiencia.
El selector de Target determina dónde mostrar una experiencia. Si se modifica una página fuera de Target, los cambios podrían afectar a la capacidad de Target de mostrar la experiencia.
Cuando se usa el selector, la clase única no equivale al ID. El selector siempre funciona con una clase única. Si no se asigna ninguna clase al elemento, el selector calcula el número de elementos del mismo nivel anteriores que tienen el mismo nombre de etiqueta.
Aunque en estos escenarios se usan como ejemplos elementos de la lista, los conceptos se aplican a cualquier elemento.
En este ejemplo, se inserta un nuevo elemento como elemento del mismo nivel en el selector de Target.
Hay una posibilidad de que JavaScript agregue la primera clase presente en el elemento. En ese caso, no se realiza la publicación y la acción no se aplica.
Elemento insertado:
<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 selector funciona según lo esperado porque li.women-section:eq(0)
no se ve afectado.
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="kids-section">Kids</li>
<li class="men-section"> Men</li> <li class="women-section">Women</li>
</ul>
</div>
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>
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>
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>
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>
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>
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>