Question

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

点击data-cell或<span>时，我需要获取<div>属性。我尝试使用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>

Answer 1

    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。

Answer 2

这是一种方法：

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/

Answer 3

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

3 个答案: