2

我有这个标记：

<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>

这在山上很苛刻 - 非常感谢您的帮助。

4

1 回答 1

3

您想要.parent()(direct parent) 或.parents()(traverse up through all parents) not .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它将在结果中返回。

于 2013-07-15T14:45:19.383 回答