jquery - 选择同一父级的所有前面的子级

Question

我在 a 中有一些<span>元素<div>。当您将鼠标悬停在一个<span>上时，它应该突出显示所有前面<spans>和悬停的<span>.

如何仅使用 CSS 或 jQuery 来做到这一点？

jsFiddle 示例

我怀疑 jQuery 答案会执行以下操作，但我找不到 1 和 2 的函数。

1. 获取当前悬停元素的子编号
2. 选择不超过该数字的所有孩子
3. 向他们添加“悬停”类

Answer 1

你可以用 jQuery 做到这一点：

$('span').hover(​​​​​function(){
    $(this).prevAll().addClass('hover'); 
},function(){
    $(this).prevAll().removeClass('hover'); 
});​

示范

这使用prevAll来选择同一 div 的所有前面的跨度。无需使用当前元素的索引，但您可以使用 index 函数获得它，然后您将使用 lt 选择器 ( $(this).sibblings(":lt("+$(this).index+")"))。当然 prevAll 要简单得多。

正如 elclarns 所注意到的，这可以缩短为

$('span').hover(function(){
    $(this).prevAll().toggleClass('hover'); 
});​

Answer 2

这取决于兼容性，可能与 CSS 一起使用，尽管没有添加类名：

div:hover span {
    /* colours all descendent spans of hovered-div */
    background-color: #ffa;
}

div:hover span:hover,
div:hover span:hover ~ span {
    /* 'de-colours' the hovered-span, and
         the subsequent sibling spans */
    background-color: #fff;
}

Answer 3

根据提供的示例，我在这里看不到任何困难，我们将使用 prevAll() 函数根据当前项目选择所有先前的兄弟姐妹。

    $("span").hover(function(){
       $(this).prevAll().addClass("hover");

},    function(){
        $(this).removeClass("hover");
})​

一个工作示例：http: //jsfiddle.net/6zm3E/1/