如何获得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"); 
});