Question

我遇到这种情况：

        <ul>
            <li>
                <a href="#" class="link">First Item</a>
                <ul>
                    <li>
                        <a href="#" class="link">Second Item</a>
                        <ul>
                            <li>
                                <a href="#" class="link">Third -1- Item</a>
                                <a href="#" class="link">Third -2- Item</a>
                                <a href="#" class="link">Third -3- Item</a>
                                <ul>
                                    <li>
                                        <a href="#" class="link">Fourth Item</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>

        <ul>
            <li>
                <a href="#" class="link">First Item</a>
                <ul>
                    <li>
                        <a href="#" class="link">Second Item</a>
                        <ul>
                            <li>
                                <a href="#" class="link">Third -1- Item</a>
                                <a href="#" class="link">Third -2- Item</a>
                                <a href="#" class="link">Third -3- Item</a>
                                <ul>
                                    <li>
                                        <a href="#" class="link">Fourth Item</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>

        <a href="#" class="link">Link</a>
        <a href="#" class="link">Link</a>

我想只得到这四个：

        <ul>
            <li>
                <a href="#" class="link">First Item</a> <-- THIS
                <ul>
                    <li>
                        <a href="#" class="link">Second Item</a>
                        <ul>
                            <li>
                                <a href="#" class="link">Third -1- Item</a>
                                <a href="#" class="link">Third -2- Item</a>
                                <a href="#" class="link">Third -3- Item</a>
                                <ul>
                                    <li>
                                        <a href="#" class="link">Fourth Item</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>

        <ul>
            <li>
                <a href="#" class="link">First Item</a> <-- THIS
                <ul>
                    <li>
                        <a href="#" class="link">Second Item</a>
                        <ul>
                            <li>
                                <a href="#" class="link">Third -1- Item</a>
                                <a href="#" class="link">Third -2- Item</a>
                                <a href="#" class="link">Third -3- Item</a>
                                <ul>
                                    <li>
                                        <a href="#" class="link">Fourth Item</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>

        <a href="#" class="link">Link</a> <-- THIS
        <a href="#" class="link">Link</a> <-- THIS

我试过这样做：

console.log(jQuery('.link').parent().find('.link:first'));

但是我不知道如何排除.next（）上的那些因为我得到的唯一引用是可以在任何地方的类.link

Answer 1

使用filter()方法过滤掉只有一个或少于li祖先元素且直接子为.link的元素（如果它在li内，则为当前元素父项）。

jQuery('.link').filter(function() {
  return $(this).parents('li:has(>.link:first-child)').length < 2;
})

jQuery('.link').filter(function() {
  return $(this).parents('li:has(>.link:first-child)').length < 2;
}).css('color', 'red')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <a href="#" class="link">First Item</a>
    <ul>
      <li>
        <a href="#" class="link">Second Item</a>
        <ul>
          <li>
            <a href="#" class="link">Third -1- Item</a>
            <a href="#" class="link">Third -2- Item</a>
            <a href="#" class="link">Third -3- Item</a>
            <ul>
              <li>
                <a href="#" class="link">Fourth Item</a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

<ul>
  <li>
    <a href="#" class="link">First Item</a>
    <ul>
      <li>
        <a href="#" class="link">Second Item</a>
        <ul>
          <li>
            <a href="#" class="link">Third -1- Item</a>
            <a href="#" class="link">Third -2- Item</a>
            <a href="#" class="link">Third -3- Item</a>
            <ul>
              <li>
                <a href="#" class="link">Fourth Item</a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

<a href="#" class="link">Link</a>
<a href="#" class="link">Link</a>

Answer 2

$('.link').not('li li .link').css('color','red');

这将获取未嵌套在 2 或更多li级别的.link个类。

$('.link').not('li li .link').css('color','red');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
            <li>
                <a href="#" class="link">First Item</a>
                <ul>
                    <li>
                        <a href="#" class="link">Second Item</a>
                        <ul>
                            <li>
                                <a href="#" class="link">Third -1- Item</a>
                                <a href="#" class="link">Third -2- Item</a>
                                <a href="#" class="link">Third -3- Item</a>
                                <ul>
                                    <li>
                                        <a href="#" class="link">Fourth Item</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>

        <ul>
            <li>
                <a href="#" class="link">First Item</a>
                <ul>
                    <li>
                        <a href="#" class="link">Second Item</a>
                        <ul>
                            <li>
                                <a href="#" class="link">Third -1- Item</a>
                                <a href="#" class="link">Third -2- Item</a>
                                <a href="#" class="link">Third -3- Item</a>
                                <ul>
                                    <li>
                                        <a href="#" class="link">Fourth Item</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>

        <a href="#" class="link">Link</a>
        <a href="#" class="link">Link</a>

jQuery获取在.parent（）上没有相同类的元素.next（）

2 个答案: