javascript - 如何找到标签是父元素？

Question

<div class="plp-product">
  <a href="#">
    <img src="../../../kay/images/PLP/jared_000.jpg" />
    <small class="more-options">More options available</small>
    <h3>Neil Lane Engagement Ring 1 3/8 ct tw Diamonds 14K White Gold</h3>
    <h4 class="price">$4,299.00</h4>
    <h4 class="price price--sale"> </h4>
    <a href="#" class="button--quick-view"> <span class="icon-search"></span> Quick View</a>
    <label class="compare-button">
      <input type="checkbox" id="item1" class="chk" onclick="getImg(this)">Compare</label>
  </a>
</div>

JS:

  var getImg = function(val){
     var data = document.getElementById(val.id).parentElement.parentElement;
         data.find('img');}

我想访问数据中的 img 标签。无法为此找到解决方法。请帮助我解决这个问题。谢谢。

Answer 1

这是纯 JavaScript 的示例代码。
它遍历 DOM 树以从复选框到图像元素。

var getImg = function(ele){
  var anch = ele.parentNode.parentNode;
  var img  = anch.getElementsByTagName('img')[0];
  alert(img.src);
}

<div class="plp-product">
  <a href="#">
    <img src="../../../kay/images/PLP/jared_000.jpg" />
    <small class="more-options">More options available</small>
    <h3>Neil Lane Engagement Ring 1 3/8 ct tw Diamonds 14K White Gold</h3>
    <h4 class="price">$4,299.00</h4>
    <h4 class="price price--sale"> </h4>
    <a href="#" class="button--quick-view">
      <span class="icon-search"></span> Quick View
    </a>
    <label class="compare-button">
      <input type="checkbox"
          id="item1"
          class="chk"
          onclick="getImg(this)">Compare
    </label>
  </a>
</div>