我有下面给出的以下 DOM 结构,我想在这两种情况下访问超链接按钮 (a)。我已将标题(header1 和 recordHeader1)设置为可点击(光标:指针)。因此,如果我单击 header1 中的任意位置(例如单击 headerTitle)或 recordHeader1 中的(名称,job_title),我想找到超链接按钮并执行某些单击功能。可能会有更多这样的场景,但在所有场景中,都有一个像下面给出的父 header ,并且父 header 始终在 DOM 中的某处具有超链接元素。请让我知道我在这里做错了什么。
场景 1:
<div class="header1">
<a href="#" class="downArrow k-icon k-minus"></a> <!-- This element -->
<img class="foundIcon" src="https://google.com">
<div class="headerTitle">Contacts</div>
</div>
场景 2:
<div class="recordNew">
<div class="recordHeader1">
<ul>
<li>
<div class="arrowContainer">
<a href="#" class="downArrow k-icon k-minus"></a> <!-- This element -->
</div>
</li>
<li>
<div class="nameContainer">
<span class="name">John Doe </span>
</div>
</li>
</ul>
</div>
<span class="job-title">Marketing Professional </span>
</div>
</div>
我尝试了什么?
// This is a generic function that makes the header clickable based on any element click
function makeRowClickable() {
$(".headerTitle, .name, .job_title, .foundIcon").on("click", function(e) {
// doesn't seem to work and find the correct element
console.log($(e.target).closest(".header1").find(".downArrow"));
});
}
最佳答案
试试这个
const headerClick = (e, header, downArrow) => {
// programatically click on the anchor tag
downArrow.click();
}
// get all .header1 elements
[...document.querySelectorAll('.header1')]
// add all .recordHeader1 elements to the array
.concat([...document.querySelectorAll('.recordHeader1')])
// add event listener on each .header1 and .recordHeader1
.forEach((header) => header.addEventListener('click', (e) => {
// inside the click handler send the event, the header element, and its child downarrow element
headerClick(e, header, header.querySelector('.downArrow'))
}));
关于javascript - 遍历特定子项 - jQuery/Javascript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38661587/