シナリオ:選択された要素の後に要素を挿入する
このシナリオでは、選択された要素の後にリスト項目を挿入します。
挿入する要素:
<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>