CODEWITHSUNDEEP
javascriptjqueryhtml
Ved
Ved

Reputation: 12103

How to find tag is parent elements?

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

I want access the img tag in data. Not able to find a workaround for this.Please help me on this. Thanks.

Upvotes: 2

Views: 89

Answers (3)

MaxZoom
MaxZoom

Reputation: 7763

Here is a sample code in pure JavaScript.
It traverse the DOM tree to get from the checkbox to an image element.

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>

Upvotes: 1

Morvael
Morvael

Reputation: 3567

I'm assuming that this will be some generated markup and that there are many products on the same page.

My solution would be to simply add some sort of id to the img element and then reference that in the on-click event. That way if you change the structure of the HTML in the future it the click wont break.

<div class="plp-product">
  <a href="#" id="product_id" >
    <img id="product_id_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(product_id)">Compare</label>
  </a>
</div>

Then in the click function:

var getImg = function(productid)
{
     var img = document.getElementById(productid + "_img");
}

Upvotes: 0

litelite
litelite

Reputation: 2851

data is not a jquery object (since you got it with a native function) and thus does not have the find method. so instead of 

data.find("img");

try

$(data).find("img");

Upvotes: 0

Related Questions