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>

现在我需要为每个父母提供一个课程，具体取决于点击的按钮。

所以我这样做：

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*适用于兄弟姐妹。

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

要想象它，如果你有：

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

如果调出$(this)：

，请查看每种方法的反应

                            .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表示会在结果中返回。

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

1 个答案: