jQuery nearest(),parents()和parent()会影响同一DOM级别的多个元素

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');
});