Reputation: 375

How to find the closest image src path in jQuery

I want to get the path of the image. I have used the closest and find methods but the log shows undefined. How can I get the path? I am using $(this) keyword because I want to get the path of selected option.

    <section class="regular slider">
    <?php 
    foreach($todays_offers as $offer){ 
    ?>
    <div class="product-container col-xs-12" >
    <div class="product-left">
    <div class="product-thumb">
    <a class="product-img detail" href="#" > 
     >
     <img  src='<?php echo base_url("images/$image")?> ' alt="<?php echo $product_name?>" ></a>
    </div>
    </div>
    <div class="half">
    <div class="product-right">
    <div class="product-brand ">
    <?php echo ucfirst($brand); ?>
    </div>
    <div class="product-name " style="height: 40px;
     overflow: hidden;line-height:17px;">
    <a href="#"><?php echo $product_name ?></a>
    </div>
    <?php
            $sql ="SELECT * FROM materials where product_name='".$product_name."' ORDER BY retail_price ASC";

            $query1 = $this->db->query($sql);
            $rowCount="SELECT * FROM materials where product_name='$product_name'";
            $query2 = $this->db->query($rowCount);
            if (!empty($query1)) {
            if ($query2->num_rows() > 1) {
            echo "<select name='netweight' class='netweight' >";    
            foreach ($query1->result() as $row) {
                $net = $row->packing;
                $retail = $row->retail_price; 
                $image = $row->image;  
                ?>
            <option id="<?php echo $row->id;?>" value="<?php echo $net;?>" data-retial="<?php echo $retail ?>" data-image='<?php echo base_url("images/$image") ?>''><?php echo $net .' - Rs.'. $retail  ?>


            </option>
            <?php }
            echo "</select>";
            }
            else
            {
                $net_weight=$offer->packing;
                echo "<span>$net_weight</span>";
            }
        }

            ?>

        <div class="price-box">
        <span class="product-price"> <i class="fa fa-inr" aria-hidden="true"></i> <?php echo   $our_price ?></span>
        <?php 
        if($our_price<$price)
        { ?>
        <span class="product-price-old">MRP <i class="fa fa-inr" aria-hidden="true"></i><?php echo  $price ?></span>
        <?php } ?>
        </div>  
        <div class="col-sm-6 col-xs-4 pad-0">

    <div qa="qty" class="input-group"><span class="input-group-addon">Qty</span> 
    <input type="text" class="form-control quantity" value="1" maxlength="2" name="quantity" id="<?php echo  $product_id ?>"></div>
     </div>
    <div class="col-sm-6 col-xs-6 pad-0">
    <div class="product-button">
    <?php if($pro_quantity>0){    ?>        
    <a class="btn btn-danger add_cart" type="button" title="Add to Cart" name="add_cart"  style="font-size:12px;width:100%;"  data-netweight="<?php echo $net_weight ?>" data-image="<?php echo $image ?>" data-productname= "<?php echo $product_name ?>" data-price="<?php echo $our_price?>" data-productid="<?php echo $product_id ?>"
 >ADD <span class="fa fa-shopping-basket"></span></a>
<?php }else{                                                                                    echo "<span class='label label-danger'>Out of stock</span>";   

}    
                                                                                ?>

            </div>
        </div>
    </div>
 </div>
</div>
<?php }?>                           
</section>
</div>

JavaScript

<script>
$(document).ready(function(){ 
    $(".netweight").change(function(){
        var net = $("option:selected",this).val();
        var id = $("option:selected",this).attr('id');
        var retail = $("option:selected",this).attr('data-retial');
        var image = $("option:selected",this).attr('data-image');           
        var path=$(this).closest('section.regular').find('img').attr('src');
        console.log(path);  

        $(this).parent().find('.product-price').text(retail); 
        $(this).parent().find('a').attr('data-netweight',net);
        $(this).parent().find('a').attr('data-price',retail);  
        $(this).parent().find('a').attr('data-productid',id);
});
</script>

Here is a sample image of select drop-down. If we choose the dro-down netweight, it fires the JavaScript event

Upvotes: 0

Answers (6)

Death-is-the-real-truth

Reputation: 72299

Note:- According to closest() :-

Given a jQuery object that represents a set of DOM elements, the .closest() method searches through these elements and their ancestors in the DOM tree and constructs a new jQuery object from the matching elements.

But in your case .product-thumb is not an ancestor element of .netweight element.

You can do it with:-

$(this).closest('.block-inner').find('img').attr('src');

Demo example:-

$(document).ready(function(){ 
  $(".netweight").change(function(){
   var path=$(this).closest('.block-inner').find('img').attr('src');
   console.log(path); 
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block-inner">
<section class="regular slider">
  <div class="product-container">
       <div class="product-left">
            <div class="product-thumb">
                 <a class="product-img detail"><img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSxofJbEzZjeldI2K5CsG4HjPH8BDlpWUNwVYhuDXUIAM0IMbQjTg'> 
                </a>
            </div>
      </div>
  </div>
  <select name='netweight' class='netweight' >
     <option value="1" id="1">1</option>
      <option value="2" id="2">2</option>
  </select>
  <div class="name"><?php echo name?>  </div>
  <div class="price"><?php echo price?>  </div>
  <div class="price"><?php echo brand?>  </div>
</section>
</div>

Upvotes: 3

Milind Anantwar

Reputation: 82231

.product-thumb is not a parent element(while traversing its ancestors in the DOM tree) of .netweight element. You need to traverse to closest .product-container and then find img tag in it:

$(".netweight").change(function(){
   var path=$(this).closest('.product-container').find('img').attr('src');
   console.log(path); 
});

$(".netweight").change(function(){
   var path=$(this).closest('section.regular').find('img').attr('src');
   console.log(path); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="block-inner">
<section class="regular slider">
  <div class="product-container">
       <div class="product-left">
            <div class="product-thumb">
                 <a class="product-img detail"><img src='http://google.com/abc.png '> 
                </a>
            </div>
      </div>
  </div>
  <select name='netweight' class='netweight' >
     <option value="1" id="1">1</option>
      <option value="2" id="2">2</option>
  </select>
  <div class="name"><?php echo name?>  </div>
  <div class="price"><?php echo price?>  </div>
  <div class="price"><?php echo brand?>  </div>
</section>
</div>

Upvotes: 5

Swathi Pai P

Reputation: 1

var path= $('.product-thumb').find('img').attr('src');

Upvotes: 0

Mehdi Bouzidi

Reputation: 1985

I think you should go back to the parent and then check the img :

$(".netweight").change(function(){
   var path=$(this).parent().find('img').attr('src');
   console.log(path); 
});

Demo:

$(".netweight").change(function(){
   var path=$(this).parent().find('img').attr('src');
   console.log(path); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block-inner">
                <section class="regular slider">
                    <div class="product-container">
                         <div class="product-left">
                              <div class="product-thumb">
                                   <a class="product-img detail"><img src='WWW.SRCFOUND.COM'> 
                                  </a>
                              </div>
                        </div>
                    </div>
                    <select name='netweight' class='netweight' >
                       <option value="<?php echo $value ?>" id="OPTION1">OPTION 1</option>
                       <option value="<?php echo $value ?>" id="OPTION2">OPTION 2</option>
                    </select>
                    <div class="name">NAME  </div>
                    <div class="price">PRICE  </div>
                    <div class="price">BRAND  </div>
                </section>
            </div>

Upvotes: 1

Emad Dehnavi

Reputation: 3441

You can use something like this :

    $(document).ready(function(){ 
            $(".netweight").change(function(){
             var path= $(this).next('a').find('img').attr('src');      
             console.log(path); 
    });

Upvotes: 0

romal tandel

Reputation: 501

just replace following line

var path=$(this).closest('.slider').find('img').attr('src');

Upvotes: 0

How to find the closest image src path in jQuery

Answers (6)

Related Questions