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

发布于 2024-11-25 03:22:21 字数 774 浏览 1 评论 0原文

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

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

非常感谢您的建议！

原文

I'm working with an unordered list of links that has two levels:

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

I click one of the .level-2 links, and want to select the higher level link from the list that contains the clicked link. (For example, I click either 1, 2, or 3 - and I want to select B.)

If my clicked link is selected as $(this).find('a') -- how can I select the higher level link?

Would appreciate your advice!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

征棹 2024-12-02 03:22:21

一种方法是向上到最近的

，然后返回到 < ;a>：

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

这种方法相当灵活，不会过度依赖于您的 DOM 结构，您可以在您想要的之前或之后添加内容，而不会破坏您的代码（当然除非你开始添加

或

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

参考文献：

One way would be to go up to the closest <ul>, then up again to the closest <li>, and then back down to the <a>:

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

This approach is fairly flexible and not overly dependent on your DOM structure, you'd be able to add things before or after the <a> you want without breaking your code (unless of course you started adding <li>s or <ul>s).

There are certainly other ways to do this but the above is pretty simple and straight forward and that should be your second concern (your first being that it works).

Referenences:

回复收藏 0 原文

巷雨优美回忆 2024-12-02 03:22:21

结合使用 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/

Use a combination of the closest and find functions (API references here and 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.

Here's a jsFiddle: http://jsfiddle.net/FishBasketGordo/nmunm/

回复收藏 0 原文

锦欢 2024-12-02 03:22:21

您可以使用这个：

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

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

You can use this:

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

Look the sample working: http://jsfiddle.net/znHXK/

回复收藏 0 原文

热鲨 2024-12-02 03:22:21

供您参考

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

for your reference

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

回复收藏 0 原文

~没有更多了~