Scenario: Insert an element with the same class name as the selected element
In this scenario, an attempt is made to insert a list when an item in a list is selected.
Inserted element:
<ul class="nav">
<li class="item"> Sale </li>
<li> class="item"> Offers </li>
</ul>
Selected
<li class="women-section">Women</li>
Selector: #wrap > ul.nav:eq(0) > li.women-section:eq(0)
Result:
The selector does not work, because ul.nav:eq(0)
provides a dynamically added element. The element won’t be available and the action is not applied. When a similar list item with same class is added dynamically or manually after an activity has been created, a new element at the first position is created. This breaks the selector.
Before:
<div id="wrap">
<ul class="nav">
<li class="men-section"> Men</li> <li class="women-section">Women</li>
</ul>
</div>
After (Attempted):
<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>
Scenario: Insert an element after the selected element
In this scenario, a list item is inserted after the selected element.
Inserted element:
<ul class="nav">
<li class="men-section"> Men Clothes</li>
<li class="women-section"> Women Clothes</li>
</ul>
Selected:
<li class="women-section">Women Shoes</li>
Selector: #wrap > ul.nav:eq(0) > li.women-section:eq(0)
Result:
In this case, inserting a list after the list ending with the selected list item works as expected. The new element is added to the same position as the selected element relative to the parent element.
Before:
<div id="wrap">
<ul class="nav">
<li class="men">Men Shoes </li> <li class="women">Women Shoes</li>
</ul>
</div>
After:
<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>
Scenario: Remove the element immediately preceding another element
In this scenario, the list item before the selected element is deleted.
Removed element:
<li class="men-section"> Men </li>
Selected:
<li class="women-section">Women</li>
Selector: #wrap > ul.nav:eq(0) > li.women-section:eq(0)
Result:
The element is successfully removed because the class of the selected item is not altered.
Before:
<div id="wrap">
<ul class="nav">
<li class="men-section">Men</li>
<li class="women-section">Women</li>
</ul>
</div>
After:
<div id="wrap">
<ul class="nav">
<li class="women-section">Women</li>
</ul>
</div>
Scenario: Remove the element immediately following another element
In this scenario, the list item after the selected element is deleted.
Removed element:
<li class="kids-section">Kids</li>
Selected:
<li class="women-section">Women</li>
Selector: #wrap > ul.nav:eq(0) > li.women-section:eq(0)
Result:
The element is successfully removed because the class of the selected item is not altered. The removed element includes a unique class within its parent subtree.
Before:
<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>
After:
<div id="wrap">
<ul class="nav">
<li class="men-section">Men</li>
<li class="women-section">Women</li>
</ul>
</div>
Scenario: Remove the selected element
In this scenario, the selected list item is deleted.
Removed element:
<li class="women-shoes">Women</li>
Selected:
<li class="women-shoes">Women</li>
Selector: #wrap > ul.nav:eq(0) > li.women-section:eq(0)
Result:
The element is successfully removed.
Before:
<div id="wrap">
<ul class="nav">
<li class="men-section">Men</li>
<li class="women-shoes">Women</li>
</ul>
</div>
After
<div id="wrap">
<ul class="nav">
<li class="men-section">Men</li>
</ul>
</div>
Scenario: Rename the class of the selected element
In this scenario, the class of the selected list item is changed.
Changed element:
<li class="women-section">Women</li>
Selected:
<li class="women-section">Women</li>
Selector: #wrap > ul.nav:eq(0) > li.women-section:eq(0)
Result:
The element class cannot be renamed because class
is not found.
Before:
<div id="wrap">
<ul class="nav">
<li class="men-section">Men</li>
<li class="women-section">Women</li>
</ul>
</div>
After (Attempted):
<div id="wrap">
<ul class="nav">
<li class="men-section">Men</li>
<li class="women-shoes">Women</li>
</ul>
</div>
Adobe Target Maturity Webinar Series
Adobe Customer Success Webinars
Tuesday, Feb 4, 4:00 PM UTC
Adobe Target innovations, including GenAI, and best practices on AI-powered personalization and experimentation at scale.
Register