如何在 JQuery 中使用带有“this”的相邻同级选择器

How can I use adjacent sibling selectors with "this" in JQuery?

本文关键字：this 选择器 JQuery      更新时间：2023-09-26

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

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

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

这是一个带有完整示例的 JSfiddle。

我该怎么做？

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

http://api.jquery.com/next/

http://jsfiddle.net/naad8wbr/3/

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

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

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

http://api.jquery.com/andSelf/

http://jsfiddle.net/naad8wbr/4/

jsFiddle Demo

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

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

 $(this).add(this.nextElementSibling).css("background", "green");
相关文章：