Question

我试图将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>

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

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

它影响所有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>

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

<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>

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

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

Answer 1

当您指定$(".anchor")时，它会找到您网页中与.anchor选择器匹配的所有对象，然后逐个对每个对象执行.closest('div').css('background-color', 'red')。如果要将其范围仅限于所单击对象的父div，则需要使用单击对象作为.closest('div')调用的起点，如下所示：

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

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

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

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

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

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

Answer 2

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

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

Answer 3

$('.anchor').closest('div')会找到所有.anchor元素并找到最近的div并将背景颜色应用于所有这些元素。

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

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

试试这个。

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

Answer 4

您可以尝试

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

希望这有助于......：）

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

4 个答案: