将 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

My Javascript:

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

I'm trying to check if user click div which id is "step1" then do something. But event.target always contain child div information like in this case div which id is "step3". How can i check if clicking item have any neatest parent div with id "step1" Remember my content is dynamic so i can't set up click listener like $("step1").click();

Answer 1

We can write a simple function to get all the parent ids of an element:

 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>

We can then attach this function our target nodes to determine their nearest parents (assuming there are no intermediate ids).

$('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' */ }
})