javascript / jQuery:为任何元素获取适当的标题

Question

给出以下HTML结构(仅作为示例，它没有多大意义):

<div id="wrapper">
<h3>First Heading</h3>
<div class="row"><div class="col-12"><p class="p1">Paragraph I</p></div></div>
<input class="input1" type="text" />
<ul>
<li>First Item</li>
<li>Second Item</li>
</ul>
<button class="b1">Send</button>
<h3>Second Heading</h3>
<div class="row">
<div class="col-4">
<p class="p1">Paragraph II</p>
</div>
<div class="col-4">
<p class="p1">Paragraph III</p>
</div>
<div class="col-4">
<div class="wrapper1">
<button class="b1">Click Me!</button>
</div>
</div>
</div>
<button class="b1">Cancel</button>
<input class="input1" type="text" />
</div>

我想要得到合适的"人性化的标题"(使用纯js或jquery)-一个人会认为这是一个元素的正确标题。这总是最近的标题，从元素向上读取文档。

so对于第一个按钮(。对于第二个和第三个按钮，它将是"第一个标题"，对于第二个和第三个按钮，它将是"第二个标题"。DOM要复杂得多，唯一可靠的是，标题(在本例中为h3)始终是div #wrapper的直接子元素。

我用javascript做了几个最接近的方法，jquery parents()， nextAll()…没有成功:(

Answer 1

我想这是可行的:

const btns = document.querySelectorAll('button');
for (const btn of btns) {
btn.addEventListener('click', () => console.log(findNearestHeading(btn)));
}
function findNearestHeading(el) {
if (el.previousElementSibling) {
if (el.previousElementSibling.tagName === 'H3') {
return el.previousElementSibling
} else {
return findNearestHeading(el.previousElementSibling);
}
} else if (el.parentElement) {
return findNearestHeading(el.parentElement);
} else {
return null;
}
}

<div id="wrapper">
<h3>First Heading</h3>
<div class="row">
<div class="col-12">
<p class="p1">Paragraph I</p>
</div>
</div>
<input class="input1" type="text" />
<ul>
<li>First Item</li>
<li>Second Item</li>
</ul>
<button class="b1">Send</button>
<h3>Second Heading</h3>
<div class="row">
<div class="col-4">
<p class="p1">Paragraph II</p>
</div>
<div class="col-4">
<p class="p1">Paragraph III</p>
</div>
<div class="col-4">
<div class="wrapper1">
<button class="b1">Click Me!</button>
</div>
</div>
</div>
<button class="b1">Cancel</button>
<input class="input1" type="text" />
</div>