Question

我正在使用无序的链接列表，其中包含两个级别：

   <ul class="level-1">
      <li class="item-a"><a href="#">A</a></li>
      <li class="item-b"><a href="#">B</a>
        <ul class="level-2">
          <li class="item-1"><a href="#">1</a></li>
          <li class="item-2"><a href="#">2</a></li>
          <li class="item-3"><a href="#">3</a></li>
        </ul>
      </li>
      <li class="item-c"><a href="#">C</a></li>
    </ul>

我单击其中一个.level-2链接，并希望从包含所点击链接的列表中选择更高级别的链接。（例如，我单击1,2或3 - 我想选择B.）

如果我的点击链接被选为$(this).find('a') - 如何选择更高级别的链接？

非常感谢您的建议！

Answer 1

一种方法是前往最近的<ul>，然后再上往最近的<li>，然后返回<a>：

$('a').click(function() {
    var $a = $(this).closest('ul').closest('li').find('a:first');
    // $a is the <a> you want.
});

这种方法非常灵活，并且不会过度依赖于您的DOM结构，您可以在<a>之前或之后添加内容，而不会破坏您的代码（除非您开始添加{{1 s或<li> s）。

当然还有其他方法可以做到这一点，但上述内容非常简单直接，应该是您的第二个问题（您的第一个问题就是它有效）。

Referenences：

Answer 2

结合使用closest和find函数（API参考here和here）：

 $(this).closest('ul')
        .closest('li')
        .find('a')
        .text() // Equals B if 1, 2, or 3 are clicked. 
                // Equals '' if A, B, or C are clicked.

这是一个jsFiddle：http://jsfiddle.net/FishBasketGordo/nmunm/

Answer 3

您可以使用：

$(document).ready(function() {
    $("ul.level-2 a").click(function () {
       alert($(this).closest('ul.level-2').parent().find('a').html()); 
    });
});

查看示例工作：http://jsfiddle.net/znHXK/

Answer 4

供您参考

$(function(){
    $("a").each(function(){
        $(this).click(function(){
            $(this).css("background-color","red");
            $(this).parents("li").children("a").css("background-color","blue");
        });
    })
})

jQuery：从较低级别的链接中选择一个级别的链接

4 个答案: