javascript - 将 id 与点击元素 id 或动态内容的最简洁父 id 相匹配

Question

我的 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
  }
});

我正在尝试检查用户是否单击 id 为“step1”的 div，然后执行某些操作。但 event.target 始终包含子 div 信息，例如本例中 id 为“step3”的 div。 我如何检查单击的项目是否有任何最整洁的父 div id 为“step1” 请记住，我的内容是动态的，因此我无法设置像 $("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' */ }
})