javascript - 如何在jQuery中找到最近的图像src路径

Question

我想获取图像的路径。我使用了 closest 和 find 方法，但日志显示 undefined。我怎样才能得到路径？我使用 $(this) 关键字，因为我想获取所选选项的路径。

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

这是选择下拉列表的示例图像。如果我们选择下拉netweight，它会触发 JavaScript 事件

Answer 1

.product-thumb 不是 .netweight 元素的父元素(在 DOM 树中遍历其祖先时)。您需要遍历到最近的.product-container，然后在其中找到img标签:

$(".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>