jquery选择"parents“

Question

如果我有以下条件：

<div id="wrapper">
    <h3>Title</h3><!-- I want to select this --> 
    <a name="anchor-name"></a>
    <div class="section">
        <h4>Sub section</h4>
        <a name="subsection-name"></a> <!-- this is selected -->
        <div class="subsection"></div>
    </div>
    <h3>Title</h3>
    <a name="anchor-name"> </a>
    <div class="section">
        <h4>Sub section</h4>
        <a name="subsection-name"></a> 
        <div class="subsection"></div>
    </div>
    <h3>Title</h3>
    <a name="anchor-name"></a>
    <div class="section">
        <h4>Sub section</h4>
        <a name="subsection-name"></a> 
        <div class="subsection"></div>
    </div>
</div>

并且我选择了锚点(如图所示)，我该如何访问<h3>Title</h3>？我想要最近的"parent h3"...

Answer 1

在进一步讨论之前，值得注意的是，h3不是a元素的父元素。但是，假设h4结构一致，下面的代码应该选择该HTML：

$(this).closest('div.section').prevAll('h3:first');

JS Fiddle demo。

顺便说一句，如果HTML的this片段包含在另一个元素中，可以给出：

<div class="contentWrapper">
    <h3>Title</h3>
             <a name="anchor-name"></a>
             <div class="section">
                    <h4>Sub section</h4>
                    <a name="subsection-name"></a> // this is selected
    <!-- ...other stuff... -->
</div>

那么它将是最容易使用的：

$(this).closest('.contentWrapper').find('h3');

参考文献：

• closest().
• find().
• prevAll().
• siblings().

Answer 2

h3不是父对象，它是父对象中的子对象，什么是“包含”h3？

假设它是另一个div，id为main-holder..并且选择的a是$(this)：

$h3 = $(this).parent("#mainholder").children("h3")

Answer 3

使用jQuery closest()函数；

$("a[name=subsection-name]").closest("h3");