javascript - 如何使用 jQuery 为一个兄弟元素的所有父元素添加类

Question

我有这个标记:

<li class="parent">
   <span class="button"></span>
   <li class="parent">
      <span class="button"></span>
      <li class="parent">
         <span class="button"></span>
      </li>
   <li>
<li>

现在我需要根据点击的按钮为每位家长提供一个类(class)。

所以我这样做:

var main_ctnr = $('.main_cntnr'),
    main_prnt = main_ctnr.find('li.parent');

$('span.button').on('click', function(){
   main_prnt.prevAll().addClass('some_class);
}

并解决需要有:

点击第一个按钮后

<li class="parent some_class">
   <span class="button"></span>
   <li class="parent">
      <span class="button"></span>
      <li class="parent">
         <span class="button"></span>
      </li>
   <li>
<li>

点击第二个按钮后

<li class="parent some_class">
   <span class="button"></span>
   <li class="parent some_class">
      <span class="button"></span>
      <li class="parent">
         <span class="button"></span>
      </li>
   <li>
<li>

第三个

<li class="parent some_class">
   <span class="button"></span>
   <li class="parent some_class">
      <span class="button"></span>
      <li class="parent some_class">
         <span class="button"></span>
      </li>
   <li>
<li>

它必须只在第一个父类中起作用，这样主父类的较早部分还没有接收到类。没有这种情况可能是，点击this_button后:

<li class="parent some_class">
   <span class="button"></span>
   <li class="parent">
      <span class="button"></span>
      <li class="parent">
         <span class="button"></span>
      </li>
   <li>
<li>    
<li class="parent some_class">
   <span class="this_button"></span>
   <li class="parent">
      <span class="button"></span>
      <li class="parent">
         <span class="button"></span>
      </li>
   <li>
<li>

这在山上非常严酷 - 非常感谢您的帮助。

Answer 1

您需要 .parent()(直接父级)或 .parents()(遍历所有父级)而不是 .prevAll。 .next* 和 .prev* 用于 sibling 。

从那里你可以调整你的选择器来过滤/缩小你的搜索，或者改变你想要遍历的 parent 的数量，例如$(this).parents('.parent') 匹配应用了 parent 类的所有父节点。

为了形象化它，如果你有:

$('span').click(function(){
  $(this)./*one of the below methods*/;
});

如果调用 $(this)，看看每个方法会如何 react :

                            .parent() .parents() .parents('foo') .parents('bar')
<div>                                  x
  <div class="foo">                    x          x
    <div class="foo bar">    x         x          x               x
      <span>target</span>
    </div>
  </div>
</div>

x 表示它将在结果中返回。