用于查找祖先文本的 Javascript/jquery 代码

Question

这是我的代码

<div class="parent">
<div>
<h3>
<a> Text </a>
</h3>
</div>
<div>
<ul>
<li>
<a class="clickme"> click me </a>
</li>
</ul>
</div>
</div>

我想做的是点击类"clickme"，我想打印文本.我也不想在任何div中添加更多的类。

谢谢你的帮助。

Answer 1

有许多方法可以使用jQuery遍历DOM。这里有两个示例(一个在jQuery中，一个在vanilla JS中(可能适用于您的情况：

// Using jQuery
$(".clickme").on("click", function (e) {
console.log($(".parent a").first().text());
});
// Using vanilla JS
document.querySelector(".clickme").addEventListener("click", function (e) {
console.log(document.querySelector(".parent a").innerHTML);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
<div>
<h3>
<a> Text </a>
</h3>
</div>
<div>
<ul>
<li>
<a class="clickme">
click me
</a>
</li>
</ul>
</div>
</div>

Answer 2

您可以在 jQuery 中选择使用.text()获取文本，如下所示

$('.parent > div > h3 > a').text()

$(document).on('click', '.clickme', function(e) {
console.log($('.parent > div > h3 > a').text());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
<div>
<h3>
<a> Text </a>
</h3>
</div>
<div>
<ul>
<li>
<a class="clickme">
click me
</a>
</li>
</ul>
</div>
</div>