jQuery nearest（），parents（）和parent（）会影响同一DOM级别的多个元素

I am trying to traverse up the DOM to the closest DIV. The markup below is below.

我试图将DOM遍历到最近的DIV。下面的标记如下。

<div>
     <span>
           <a class="anchor">Text</a>
     </span>
</div>
<div>
     <span>
           <a class="anchor">Text</a>
     </span>
</div>
<div>
     <span>
           <a class="anchor">Text</a>
     </span>
</div>

When I use any of the following:

当我使用以下任何一项时：

$('.anchor').closest('div').css('background-color', 'red');
$('.anchor').parents('div').css('background-color', 'red');
$('.anchor').parent().parent().css('background-color', 'red');

It affects all the DIVs like so:

它影响所有的DIV，如下所示：

<div style="background-color: red">
     <span>
           <a class="anchor">Text</a>
     </span>
</div>
<div style="background-color: red">
     <span>
           <a class="anchor">Text</a>
     </span>
</div>
<div style="background-color: red">
     <span>
           <a class="anchor">Text</a>
     </span>
</div>

If I were to click the middle anchor I want this:

如果我点击中间锚点我想要这个：

<div>
     <span>
           <a class="anchor">Text</a>
     </span>
</div>
<div style="background-color: red">
     <span>
           <a class="anchor">Text</a>
     </span>
</div>
<div>
     <span>
           <a class="anchor">Text</a>
     </span>
</div>

I think I see why closest() would match all three DIVs as the closest DIV to the clicked anchor as it is generically matching DIV.

我想我明白为什么nearest（）会匹配所有三个DIV作为最接近点击锚点的DIV，因为它通常匹配DIV。

But when using parents() or parent() it's not as clear as the other DIVs are not a parent of a click anchor. But I can also see where it might just be generically matching DIVs again at that level in the DOM. Although it seems like parents() and parent() should maintain more of a contextual context when matching.

但是当使用parents（）或parent（）时，它并不像其他DIV不是单击锚点的父级那样清晰。但是我也可以看到它在DOM中的那个级别再次与DIV再次匹配。虽然看起来parent（）和parent（）在匹配时应该保持更多的上下文上下文。

4 个解决方案

#1

When you specify $(".anchor"), it is finding all the objects in your page that match the .anchor selector and then, one by one, doing .closest('div').css('background-color', 'red') on each of them. If you want to scope it to only the parent div of the object that was clicked on, you need to use the click-on object as the starting point for your .closest('div') call like this:

当你指定$（“。anchor”）时，它会找到页面中与.anchor选择器匹配的所有对象，然后逐个执行.closest（'div'）。css（'background-color'，他们每个人都'红'）。如果要将其范围仅限于所单击对象的父div，则需要使用click-on对象作为.closest（'div'）调用的起点，如下所示：

$(this).closest('div').css('background-color', 'red');

This will then only affect the clicked on parent div starting from the this object.

这将仅影响从此对象开始的单击父div。

You haven't shown the code for you click handler, but it could be like this:

你没有为你单击处理程序显示代码，但它可能是这样的：

$(".anchor").click(function() {
    $(this).closest('div').css('background-color', 'red');
});

or, if you wanted to clear the other items that might have been red from previous clicks and then make this one red, you could do this:

或者，如果您想要清除之前点击中可能已经红色的其他项目，然后将其变为红色，则可以执行以下操作：

$(".anchor").click(function() {
    var master$ = $(this).closest('div')
    master$.siblings().css('background-color', 'white');
    master$.css('background-color', 'red');
});

#2

Your initial node query $('.anchor') is matching all three <a> elements, so everything you do from then on (be it closest, parents or whatever) will happen once for each of those matching elements. If you use any of those approaches in a click handler, it won't cause you problems because it'll only be firing for the one element.

您的初始节点查询$（'。anchor'）匹配所有三个元素，因此您从那时开始做的所有事情（无论是最接近的，父母还是其他）将针对每个匹配元素发生一次。如果您在单击处理程序中使用任何这些方法，它不会导致您出现问题，因为它只会触发一个元素。

You'd probably be better off adding/removing classes, as that's a little easier than tidying up CSS you've added directly in using .css().

添加/删除类可能会更好，因为这比使用.css（）直接添加的CSS更容易一些。

#3

$('.anchor').closest('div') will find all the .anchor elements and find its closest div and apply the background color to all of them.

$（'。anchor'）。nearest（'div'）将找到所有.anchor元素并找到它最接近的div并将背景颜色应用于所有这些元素。

You should use this to refer to the element being clicked inside the click handler.

您应该使用它来引用单击处理程序中单击的元素。

$(this).closest('div')..

Try this.

尝试这个。

$(".anchor").click(function() {
    $(this).closest('div').css('background-color', 'red');
});

#4

You may try

你可以试试

$(this).closest('div').css('background-color', 'red');
$(this).parents('div').css('background-color', 'red');
$(this).parent().parent().css('background-color', 'red');

Hope this helps... :)

希望这可以帮助... ：）

#1

$(this).closest('div').css('background-color', 'red');