检索具有特定数据属性的祖先元素

Retrieve ancestor element with a certain data attribute

本文关键字：祖先 元素 数据属性 检索      更新时间：2023-09-26
如何

通过单击其子元素之一来检索具有特定数据属性的祖先元素？

我需要在单击<span>或<div>时获取data-cell属性。我尝试使用 node.parentElement ，但是当我单击范围时，它会返回div，并且很清楚。

有没有像node.parentElement.dataset.dataCell这样的东西来获得我需要的东西？

<table>
 <tr>
  <td class="out" data-cell="3-2-2015">
     <div>
        <span> Number one </span>
        <span> Number two </span>
        <span> Number three </span>
     </div>
  </td>
 </tr>
</table>


    document.querySelector("table").addEventListener("click", function(e){
         var element = e.target;
         var found = false;
         if (element.tagName != "TABLE")
         {
             while(element && element.parentElement && element.tagName != "TABLE")
             {
                 if (element.hasAttribute("data-cell") )
                 {
                     found = element.getAttribute("data-cell");
                     break; //stop the loop;
                 }
                 element = element.parentElement;
             }
         }
      
         alert(found);
    });
<table>
 <tr>
  <td class="out" data-cell="3-2-2015">
     <div>
        <span> Number one </span>
        <span> Number two </span>
        <span> Number three </span>
     </div>
  </td>
 </tr>
 <tr>
  <td class="out" >
     <div>
        <span> Number one </span>
        <span> Number two </span>
        <span> Number three </span>
     </div>
  </td>
 </tr>  
  
</table>

这将做到这一点：

使用

while 循环使用 parentElement 迭代备份 DOM 树。如果找到属性data-cell则返回元素并中断循环，如果没有，则返回false 。

这里有一种方法可以做到这一点：

.HTML：

<table>
    <tr>
        <td class="out" data-cell="3-2-2015">
            <div class="div clicker">
                <span class="span clicker"> Number one </span>
                <span class="span clicker"> Number two </span>
                <span class="span clicker"> Number three </span>
            </div>
        </td>
    </tr>
</table>

JavaScript：

// generic functions
window.getAncestorWithAttribute = function(elem,attr) {
    elem = elem.parentNode;
    while (elem) {
        if (elem.hasAttribute(attr))
            return elem;
        elem = elem.parentNode;
    } // end while
    return null;
}; // end getAncestorWithAttribute()
// event handlers
window.mainClickCallback = function(ev) { alert(getAncestorWithAttribute(ev.target,'data-cell')); ev.stopPropagation(); };
// attach event handlers to target elements
Array.forEach(document.getElementsByClassName('clicker'), function(elem) { elem.addEventListener('click', mainClickCallback ); } );

http://jsfiddle.net/z8fba8jg/4/

    document.querySelector("table").addEventListener("click", function(e){
         var element = e.target;
         var found = false;
         if (element.tagName != "TABLE")
         {
             while(element && element.parentElement && element.tagName != "TABLE")
             {
                 if (element.hasAttribute("data-cell") )
                 {
                     found = element.getAttribute("data-cell");
                     break; //stop the loop;
                 }
                 element = element.parentElement;
             }
         }
      
         alert(found);
    });
<table>
 <tr>
  <td class="out" data-cell="3-2-2015">
     <div>
        <span> Number one </span>
        <span> Number two </span>
        <span> Number three </span>
     </div>
  </td>
 </tr>
 <tr>
  <td class="out" >
     <div>
        <span> Number one </span>
        <span> Number two </span>
        <span> Number three </span>
     </div>
  </td>
 </tr>  
  
</table>

相关文章：