1

我正在使用具有两个级别的无序列表链接：

   <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')-- 我如何选择更高级别的链接？

非常感谢您的建议！

4

4 回答 4

3

一种方法是上升到最近的位置<ul>，然后再次上升到最近的<li>位置，然后返回到<a>：

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

这种方法相当灵活，并且不会过度依赖您的 DOM 结构，您可以在<a>不破坏代码的情况下在您想要的之前或之后添加内容（当然，除非您开始添加<li>s 或<ul>s）。

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

参考资料：

于 2011-07-21T05:01:06.667 回答
2

使用closest和函数的组合（此处和此处find的API 参考）：

 $(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/

于 2011-07-21T04:58:46.960 回答
1

你可以使用这个：

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

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

于 2011-07-21T05:03:20.393 回答
1

供你参考

$(function(){
    $("a").each(function(){
        $(this).click(function(){
            $(this).css("background-color","red");
            $(this).parents("li").children("a").css("background-color","blue");
        });
    })
})
于 2011-07-21T05:16:45.473 回答