如何在 JQuery 中使用带有“this”的相邻兄弟选择器？答案

【问题标题】：How can I use adjacent sibling selectors with "this" in JQuery?如何在 JQuery 中使用带有“this”的相邻兄弟选择器？
【发布时间】：2015-01-08 09:04:07
【问题描述】：

我有一个各种divs 的列表，它们都属于同一类。我正在使用.each 函数在用户单击时选择单个的（仅作为示例），之后的任何操作自然需要this，因此它只选择有问题的div。例如：

   $(".div").each(function(){
        $(this).click(function(){
               $(this).css("background","green");  
        });
    });

但是，如果我想让行中的下一个元素在点击时也变成绿色怎么办？我的第一直觉是使用adjacent sibling selectors，但它似乎只在使用两个绝对元素时才有效，即$(".element1 + .element2")。我似乎无法让它与this 一起工作。

这里有一个JSfiddle，有一个完整的例子可以玩。

我该怎么做？

【问题讨论】：

【解决方案1】：

您正在寻找$(this).next()

$(".div").click(function () {
    $(this).next().css("background", "green");
});

如果你想要下一个和这个，那么你可以使用：

$(".div").click(function () {
    $(this).next().andSelf().css("background", "green");
});

【讨论】：

【解决方案2】：

jsFiddle Demo

为了“使行中的下一个元素在单击时也变为绿色”，您必须添加到 jQuery 对象中的元素集。

您可以使用 nextElementSibling ^MDN 与 jQuery 的 add 相关联

 $(this).add(this.nextElementSibling).css("background", "green");

【讨论】：

这不是 jQuery 的方式。 IE。 $(this).next()。并且不支持旧的IE。它也更冗长。最后，它不像+ 选择器那样工作，因为它同时选择了两者。相邻兄弟选择器仅选择 2 个元素中的后者。
@Petah - 已弃用对 IE8 的支持（即使在当前的 jQuery 版本中也是如此）。 .next() 在这里不起作用，因为 OP 想要 both。
示例使用支持 IE 8 的 jQuery 1.11