javascript - 使用 Jquery 获取最近父 H4 的文本

Question

我在这个结构的页面上有几个这样的 html 块

<div class="listing">
<h4><a href="#">Some test Entry here</a></h4>
<div class="entry clearfix">
    <a href="#" class="btn">
        Text Here                    
    </a>
</div>
</div>

我在'.entry .btn'上有点击事件，它很好。但我想在与我单击的 btn 相同的列表块中获取“H4 a”的内部文本。我尝试了以下方法，但似乎无法获得 H4 文本。

var getTitle = $(this).parents("h4").first();
alert(getTitle.html());

我也试过closest()了，还是拿不到H4？有任何想法吗？

Answer 1

closest&parents寻找祖先。但是，h4在 parent 的另一个孩子中.listing。

尝试：

var getTitle = $(this).closest('.listing').find("h4").first();

Answer 2

首先你需要在DOM结构中向上遍历，使用.parent()or.parents()函数来识别目标元素。

对于您的要求，您不需要直接父级，因此.parent()没有用，而是您需要使用.parents()来获取 DOM 中的所有祖先并使用类选择器引用一个并.listing最终向内遍历以找到目标元素h4。

JS代码：

$('.btn').on('click',function(){
   alert($(this).parents('.listing').find('h4').html());
});

现场演示@JSFIDDLE

快乐编码:)

Answer 3

在 jquery 中使用 prev 函数

var getTitle = $(this).prev().find("h4").first();
alert(getTitle.html());