如何獲得div內的點擊跨度並使用JQuery修改前面的跨度和後續跨度？

Question

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

如果用戶點擊跨度，我需要在該跨度上應用樣式（文本顏色）以及該div內的所有前面跨度。還要刪除之前點擊的跨度做法。跨度沒有類和id。

我怎樣才能實現這個使用J查詢？

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"); 
});