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

我正在尝试遍历DOM到最近的DIV。下面的标记如下。jQuery nearest（），parents（）和parent（）会影响同一DOM级别的多个元素

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

来源

2012-03-15 hungerstar

你能证明你的点击事件？ – 2012-03-15 18:37:37

如果指定$(".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-15 18:38:24 jfriend00

我觉得'.css（'background-color'，'inherit'）'会更合适。 – 2012-03-15 18:42:50

啊，是的，愚蠢的我，忽略了最简单明显的问题。我将所有锚与类锚相匹配并向上移动。因为他们都有班级主播，他们都会匹配。我想，有时间休息一下。谢谢！ – hungerstar 2012-03-15 18:43:02

@JamesAylett - 我只是用一个例子。在设置为红色之前，我们不知道它是什么颜色。也许以前是白色的。这只是一个例子，向他们展示如何去做。 – jfriend00 2012-03-15 18:45:17

您最初的节点查询$('.anchor')是匹配所有三个<a>元素，让你从那么做的一切（是它closest，parents还是什么永远）会为每个匹配元素发生一次。如果你使用任何一个单击处理这些方法的，也不会造成问题，因为它会只发射了一个元素。

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

来源

2012-03-15 18:39:22

确实如此，无论出于何种原因，这正是我在示例中使用的原因。实际的标记还有更多的事情要做，而不仅仅是改变背景颜色。 – hungerstar 2012-03-15 19:03:11

$('.anchor').closest('div')会发现所有的.anchor元素，并找到与其最接近的股利和应用背景色为所有的人。

您应该使用this指被点击的点击处理程序中的元素。

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

试试这个。

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

来源

2012-03-15 18:39:40 ShankarSangoli

您可以尝试

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

希望这有助于... :)

来源

2012-03-15 18:51:03

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

回答

相关问题