通过类名称获取祖先

Question

I have a component which have buttons and list both of which perform events on click. I need a common way to get the ancestor element for these elements. The structure looks like

<div class='a'>
   <button class ='b' data-name="hello">
      <span class ='c'>clickMe
         <span>somehting</span>
      </span>
   <button>
   <ul class ='d'>
      <li data-name="about">
          <span class ='e'>something here
             <span>somehting</span>
          </span>
      </li>
      <li data-name="home">
          <span class ='e'>something elser here
              <span>somehting</span>
          </span>
      </li>
   </ul>
</div>

I try to get the element button and li because I need to get data-name information. e.target is the element that was clicked

var targetel = goog.dom.getAncestorByClass(e.target,null,class??);

Not sure how to get the correct element irrespective if its a button or li. Do i need to add a unique class to all the elements ?

Answer 1

Just use e.currentTarget

 var result = document.querySelector('#result'); var clickables = document.querySelectorAll('button, li'); //add click listener to elements for (var i = 0, l = clickables.length; i < l; i++) { clickables[i].addEventListener('click', getDataName); } function getDataName(e) { var dataName = e.currentTarget.getAttribute('data-name'); result.textContent = dataName; } 

 <div class='a'> <button class ='b' data-name="hello"> <span class ='c'>clickMe <span>somehting</span> </span> </button> <ul class ='d'> <li data-name="about"> <span class ='e'>something here <span>somehting</span> </span> </li> <li data-name="home"> <span class ='e'>something elser here <span>somehting</span> </span> </li> </ul> </div> <div id="result">data-name of clicked element goes here</div> 

Answer 2

https://api.jquery.com/parents/

Use the jquery.parents("li") function. it will select all the parents that match your css filter. so you can do

var parentli = targete1.parents("li");

var button = targete1.parents("div").children[0];

Or something similar to that.

EDIT: Not sure why i got downvoted, here is my idea in action.

maybe press f12 to inspect element and look at the console log.

 var onClick = function () { var parentEl = $(this).parents("button, li")[0]; console.log(parentEl); $("#result")[0].innerText = parentEl.getAttribute("data-name"); }; $('span.c').click(onClick); $('li span.e').click(onClick); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='a'> <button class='b' data-name="hello"> <span class='c'>clickMe <span>something</span> </span> </button> <ul class ='d'> <li data-name="about"> <span class ='e'>something here <span>somehting</span> </span> </li> <li data-name="home"> <span class ='e'>something elser here <span>something</span> </span> </li> </ul> </div> <div id="result">result goes here</div>