現在のリストアイテムと以前のリストアイテムにクラスを追加

Question

私は、ビデオのセクションを再生するためのメニューとして使用される順序付けられていないリストを持っています。クリックしたときにハイライトされるリストアイテム（動画部分）は、クラスを追加して他のリストアイテムからクラスを削除することによって表示されます。私はあなたが項目をクリックすると、前のリスト項目も選択されるように、これを変更するように依頼されました。つまり、Vid 2をクリックすると、Vid 1とStartにはVid 2と同様に 'selected'クラスが与えられます.Vid 3をクリックすると、Vid 3、Vid 2、Vid 1、Startなどが強調表示されます。

また、選択したクラスをクリックしたアイテムより先のリストアイテムから削除したいと考えています。たとえば、Vid 4が選択され、ユーザーがVid 2をクリックすると、選択したクラスがVid 4およびVid 2から削除され、Vid 1およびStartでクラスが選択されます。申し訳ありませんが、これはほとんど意味がなく、事前に感謝する場合。

$("#select li a").click(function() { 
 
    $(this).parent().addClass('selected').siblings().removeClass('selected'); 
 
});

#video-controls ul li { 
 
\t cursor: pointer; 
 
} 
 

 
#video-controls ul li a { 
 
\t color: #5f6a72; 
 
\t text-decoration: none; 
 
\t display: block; 
 
} 
 

 
#video-controls ul li.selected, 
 
#video-controls ul li.selected a { 
 
\t color: #00aad2; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
 
<nav id="video-controls"> 
 
    <ul id="select"> 
 
    <li id="start"><a href="#/">Start</a></li> 
 
    <li id="vid-1"><a href="#/">Vid 1</a></li> 
 
    <li id="vid-2"><a href="#/">Vid 2</a></li> 
 
    <li id="vid-3"><a href="#/">Vid 3</a></li> 
 
    <li id="vid-4"><a href="#/">Vid 4</a></li> 
 
    </ul> 
 
</nav>

Answer 1

あなたは

1缶）トラバースおよび以前のすべての要素を取得します。

2））がクリックされたオブジェクトの親

3を追加上記返されるすべての要素を選択したクラスを追加する.andSelf()を使用します。

4））ステップ2

5で返された要素以外の残りの兄弟を見つける御馳走を働いたことを釘

$("#select li a").click(function() { 
 
$(this).parent().prevAll().andSelf().addClass('selected').filter(':last').nextAll().removeClass('selected'); 
 
});

#video-controls ul li { 
 
\t cursor: pointer; 
 
} 
 

 
#video-controls ul li a { 
 
\t color: #5f6a72; 
 
\t text-decoration: none; 
 
\t display: block; 
 
} 
 

 
#video-controls ul li.selected, 
 
#video-controls ul li.selected a { 
 
\t color: #00aad2; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
 
<nav id="video-controls"> 
 
    <ul id="select"> 
 
    <li id="start"><a href="#/">Start</a></li> 
 
    <li id="vid-1"><a href="#/">Vid 1</a></li> 
 
    <li id="vid-2"><a href="#/">Vid 2</a></li> 
 
    <li id="vid-3"><a href="#/">Vid 3</a></li> 
 
    <li id="vid-4"><a href="#/">Vid 4</a></li> 
 
    </ul> 
 
</nav>