div内のクリックスパンを取得し、JQueryを使用して前のスパンと後継スパンを変更するにはどうすればよいですか？

Question

<div> 
<span>A</span> 
<span>B</span> 
<span>C</span> 
<span>D</span> 
</div> 

ユーザーがスパンをクリックした場合、そのスパンとそのdiv内のすべての先行スパンにスタイル（テキストカラー）を適用する必要があります。また、以前にクリックされたスパン行為を削除する。スパンにはクラスとIDはありません。

私はこれをJ Queryを使用してどのように達成できますか？

Answer 1

クリックした要素のすべての兄弟要素を選択するには、prevAll()を使用できますが、クリックした要素を含めるには、andSelf()を追加する必要があります。 spanをクリックするたびに、最初にすべてspanのバックグラウンドを削除する必要があります。

$('div span').click(function() { 
 
    $('div span').css('background', 'none'); 
 
    $(this).prevAll().andSelf().css('background', 'red') 
 
})

body { 
 
    padding-top: 10px; 
 
} 
 
span { 
 
    cursor: pointer; 
 
    padding: 10px; 
 
    border: 1px solid black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <span>A</span> 
 
    <span>B</span> 
 
    <span>C</span> 
 
    <span>D</span> 
 
</div>

Answer 2

チェックthisフィドルコード場合に役立ちます。

JS：

$('span').click(function(){ 
    $(this).siblings().css('color','') 
    $(this).css('color','red'); 
    $(this).prevAll().css("color", "red"); 
});