1

我正在尝试将 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()应该在匹配时保持更多的上下文上下文。

4

4 回答 4

8

当您指定$(".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');
});
于 2012-03-15T18:38:24.077 回答
2

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

添加/删除类可能会更好，因为这比使用.css().

于 2012-03-15T18:39:22.390 回答
1

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

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

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

尝试这个。

$(".anchor").click(function() {
    $(this).closest('div').css('background-color', 'red');
});
于 2012-03-15T18:39:40.793 回答
1

你可以试试

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

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

于 2012-03-15T18:51:03.580 回答