如何使用Jquery查找标签的父元素

Question

当我点击li标签中的锚点时，我想要确定它前面的h3标签的索引。例如，如果我点击“概述”，我想要获取“介绍”的索引。如何使用Jquery实现这一点？

<h3><a href="Introduction" rel="address:/Introduction">Introduction</a></h3>
<div class="navigation primary_navigation">
    <ul>
        <li><a href="purpose" rel="address:/purpose">Purpose</a></li>
        <li><a href="overview" rel="address:/overview">Overview</a></li>
    </ul>
</div>
<h3><a href="Incorporate_Learning" rel="address:/Incorporate_Learning">Incorporate Learning</a></h3>
<div class="navigation primary_navigation">
    <ul>
        <li><a href="appraise" rel="address:/appraise">Appraise</a></li>
        <li><a href="select" rel="address:/select">Select</a></li>
        <li><a href="define" rel="address:/define">Define</a></li>
        <li><a href="execute" rel="address:/execute">Execute</a></li>
        <li><a href="resources" rel="address:/resources">Resources</a></li>
    </ul>
</div>

- Tyler D

Answer 1

$(function () {
    $("li a").click(function (e) {
        e.preventDefault();
        var $h3 = $(this).closest(".primary_navigation").prev();
        console.log($("h3").index($h3));
    });
});

- ScottE

---

谢谢，这个完美地解决了问题。现在看起来很有道理，早上我只是无法理解它。干杯。Stackoverflow是一个很棒的社区。 - Tyler D

值得注意的是，这个索引是在你页面上每个H3数组中的索引，而不仅仅是你导航部分的索引。在示例代码中它可以工作，但完整的页面可能无法返回你想要的结果。 - Robert

非常正确，我会确保添加一个类选择器。 - Tyler D

Answer 2

如果您想获取索引，可以从点击的位置获取所有先前的h3。类似于下面这样：

$(this).closest('div.navigation').prevAll('h3').length

当有2个元素时，会返回2，因此你的索引是前一个h3长度减1。

- Robert

---

这似乎是额外的工作来获取索引。为什么不直接使用索引函数呢？ - ScottE

为什么要遍历所有H3元素的DOM，当减去一个元素更加简单？ - Robert

Answer 3

你可以尝试一下

$('.navigation a').click(function(){
  var uncle = $(this).parents(".navigation").prev('h3');
  ...
});

- malko

Answer 4

这应该可以工作

$("li").live("click", function(){
    alert($(this).parents('.navigation').prev().html());
});

- Bill Bonar

---

这是关于点击链接而不是列表元素的内容。 - Teneff

Answer 5

$('li>a').click(function(){
    var uncle = $(this).parents('ul').parent().prev();
    return false;
});

jsFiddle

- Teneff