将 id 与动态内容的点击元素 id 或最整洁的父 id 匹配

Question

My HTML：

...included jquery
<div id="step1">
.. there are more child div
<div id="step2">
.. more child div
<div id="step3">
Selection 1
</div>
</div>
</div>
<div class="class-1">
<div class="class-2">
<div class="class-3">
Section 2
</div>
</div>
</div>
...Some more neatest div and element

我的Javascript：

$(document).click(function(event){
let idNo = event.target.id;
if(idNo == "step1"){
# Do something
}else{
console.log(idNo); //print "step3"
# Do others
}
});

我正在尝试检查用户是否单击了div，其中 id 是"step1"，然后做某事。但是event.target总是包含子div信息，就像在本例中id为"step3"的div一样。 如何检查单击项目是否有任何ID为"step1"的最整洁的父div 请记住，我的内容是动态的，因此我无法像$("step1").click();那样设置点击侦听器

Answer 1

我们可以编写一个简单的函数来获取元素的所有父 id：

function getParentIds(el) {
let ids = [];

while (el.parentNode) {
let parentId = el.parentNode.id;
if (parentId)
ids.push(parentId);
el = el.parentNode;
}

return ids;
}
// sample usage
let element = document.querySelector('#three');
console.log(getParentIds(element));
// output: ['two', 'one']

<div id="one">
<div id="two">
<div id="three">
Sample
</div>
</div>
</div>

然后，我们可以将此函数附加到目标节点以确定它们最近的父节点(假设没有中间 ID(。

$('step1 *').click(function() {
var parentIds = getParentIds(this);
var nearestParent = parentIds[parentIds.length - 1];
if (nearestParent == 'step1')) {/* do something for immediate children of step 1 */}
else if (nearestParent == 'step2') {/* do something for immediate children of step 2 */}
else { /* nearestParent is 'step3' */ }
})