ページ修正のシナリオ
このトピックのシナリオでは、ページに加えられた変更が、Adobe Targetのエクスペリエンス表示機能にどのような影響を与えるかを示します。
Target セレクターは、エクスペリエンスを表示する位置を決定します。ページが Target 外で修正されると、Target のエクスペリエンス表示機能に影響することがあります。
セレクターを使用する場合、一意のクラスと ID は同じ意味になりません。セレクターは常に一意のクラスを使用します。要素にクラスが割り当てられていない場合、セレクターは、同じタグ名を持つ以前の兄弟の数を計算します。
NOTEシナリオ：選択された要素の前に、別のクラス名を持つ要素を挿入する
この例では、Target セレクターの要素の兄弟として、新しい要素を挿入します。
この要素の最初のクラスは JavaScript で追加できる場合があります。その場合、配信は失敗し、アクションは適用されません。
挿入する要素：
<li class="kids-section">Kids</li>
選択される要素：
<li class="women-section">Women</li>
セレクター：#wrap > ul.nav:eq(0) > li.women-section:eq(0)
結果：
li.women-section:eq(0)は影響を受けないので、セレクターは意図したとおりに機能します。
変更前：
<div id="wrap">
<ul class="nav">
<li class="men-section"> Men</li> <li class="women-section">Women</li>
</ul>
</div>
変更後：
<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>
シナリオ：選択された要素と同じクラス名の要素を挿入する
このシナリオでは、リスト項目が選択されたときに、リストの挿入を試みます。
挿入する要素：
<ul class="nav">
<li class="item"> Sale </li>
<li> class="item"> Offers </li>
</ul>
選択
<li class="women-section">Women</li>
セレクター：#wrap > ul.nav:eq(0) > li.women-section:eq(0)
結果：
ul.nav:eq(0)は動的に追加される要素を提供するので、セレクターは機能しません。要素は使用できず、アクションは適用されません。アクティビティの作成後に、同じクラスの同様のリスト項目が動的または手動で追加されると、最初の位置の新しい要素が作成されます。これによりセレクターが破損します。
変更前：
<div id="wrap">
<ul class="nav">
<li class="men-section"> Men</li> <li class="women-section">Women</li>
</ul>
</div>
変更後（試行済み）：
<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>
シナリオ：選択された要素の後に要素を挿入する
このシナリオでは、選択された要素の後にリスト項目を挿入します。
挿入する要素：
<ul class="nav">
<li class="men-section"> Men Clothes</li>
<li class="women-section"> Women Clothes</li>
</ul>
選択される要素：
<li class="women-section">Women Shoes</li>
セレクター：#wrap > ul.nav:eq(0) > li.women-section:eq(0)
結果：
このケースでは、リスト項目が選択されたリストの末尾にリストが正しく挿入されます。新しい要素は、親要素から見て、選択された要素と同じ位置に追加されます。
変更前：
<div id="wrap">
<ul class="nav">
<li class="men">Men Shoes </li> <li class="women">Women Shoes</li>
</ul>
</div>
変更後：
<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>
シナリオ：ある要素の直前の要素を削除する
このシナリオでは、選択された要素の前にあるリスト項目を削除します。
削除する要素：
<li class="men-section"> Men </li>
選択される要素：
<li class="women-section">Women</li>
セレクター：#wrap > ul.nav:eq(0) > li.women-section:eq(0)
結果：
選択された項目のクラスは変更されないので、要素は正常に削除されます。
変更前：
<div id="wrap">
<ul class="nav">
<li class="men-section">Men</li>
<li class="women-section">Women</li>
</ul>
</div>
変更後：
<div id="wrap">
<ul class="nav">
<li class="women-section">Women</li>
</ul>
</div>
シナリオ：ある要素の直後の要素を削除する
このシナリオでは、選択された要素の後にあるリスト項目を削除します。
削除する要素：
<li class="kids-section">Kids</li>
選択される要素：
<li class="women-section">Women</li>
セレクター：#wrap > ul.nav:eq(0) > li.women-section:eq(0)
結果：
選択された項目のクラスは変更されないので、要素は正常に削除されます。削除される要素の親サブツリー内には一意のクラスが含まれます。
変更前：
<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>
変更後：
<div id="wrap">
<ul class="nav">
<li class="men-section">Men</li>
<li class="women-section">Women</li>
</ul>
</div>
シナリオ：選択された要素を削除する
このシナリオでは、選択されたリスト項目を削除します。
削除する要素：
<li class="women-shoes">Women</li>
選択される要素：
<li class="women-shoes">Women</li>
セレクター：#wrap > ul.nav:eq(0) > li.women-section:eq(0)
結果：
要素は正常に削除されます。
変更前：
<div id="wrap">
<ul class="nav">
<li class="men-section">Men</li>
<li class="women-shoes">Women</li>
</ul>
</div>
変更後
<div id="wrap">
<ul class="nav">
<li class="men-section">Men</li>
</ul>
</div>
シナリオ：選択された要素のクラスの名前を変更する
このシナリオでは、選択されたリスト項目のクラスを変更します。
変更する要素：
<li class="women-section">Women</li>
選択される要素：
<li class="women-section">Women</li>
セレクター：#wrap > ul.nav:eq(0) > li.women-section:eq(0)
結果：
class が見つからないので、要素クラスの名前を変更できません。
変更前：
<div id="wrap">
<ul class="nav">
<li class="men-section">Men</li>
<li class="women-section">Women</li>
</ul>
</div>
変更後（試行済み）：
<div id="wrap">
<ul class="nav">
<li class="men-section">Men</li>
<li class="women-shoes">Women</li>
</ul>
</div>
