CODEWITHSUNDEEP
jqueryhtml
chris227
chris227

Reputation: 607

jQuery find next class outside parent div

I'm trying to find the next pret_prod_cos class outside a parent div and for some reason it's not working. When I press change class I want to add new html to class pret_prod_cos. Here is my html:

<div class="col-sm-5">
   <div class="cart_quantity_button">
                                    <div id="<?php echo $cart['ID_Produs']; ?>" class="input-group input-group-option quantity-wrapper">

                                <span class="input-group-addon input-group-addon-remove quantity-remove btn">
                                    <span class="glyphicon glyphicon-minus"></span>
                                </span>

                               <input class="cart_quantity_input quantity-count" type="text" name="quantity" id="<?php echo $cart['ID_Produs']; ?>inp" value="<?php echo $cart['qty']; ?>" autocomplete="off" size="2">

                                <span class="input-group-addon input-group-addon-remove quantity-add btn">
                                    <span class="glyphicon glyphicon-plus"></span>
                                </span>

                            </div>
   </div>
                                <div class="mod" style="display:none;"> 
                                <a class="change" href="/engine/shop/edit_cos.php?id=<?php echo $cart['ID_Cos']; ?>  " data-pret="<?php echo $cart['Pret']; ?>">modifică</a>
                                </div>
</div>

<div class="col-sm-2">
<h2 class="pret_prod_cos"><?php echo $cart['pret']; ?> lei</h2>
<a href="engine/shop/sterge_prod.php?id=<?php echo $cart['ID_Cos']; ?>">elimina din cos</a>
</div>

jquery

<script type="text/javascript">
$(".change").click(function(e){
    
    e.preventDefault();
    var pret=$(this).data("pret");
   var qty = $(this).parents().eq(1).find('input').val();
   var total=parseInt(pret)*parseInt(qty);
    var href = $(this).attr('href');
    
   $.ajax({
      type: "POST",
    url: href,
    data: { qtyy:qty },
    success: function(result) {
        $(this).parent().closest(".col-sm-2").find(".pret_prod_cos").html(total);
       cos();
    }
});
    
});
</script>

Upvotes: 2

Views: 2009

Answers (1)

DinoMyte
DinoMyte

Reputation: 8868

.closest() works just like a parent(). Since .col-sm-2 is not a parent of .change, the expression is not going to work. You need to navigate to the parent .col-sm-5 of .change and then use .next() to get the next occuring element with specified class. Also, you need to define reference to the current object (this) to a variable to use after ajax has completed since after the ajax, you'll loose reference to 'this' object.

$(".change").click(function(e){

    e.preventDefault();
    var pret=$(this).data("pret");
   var qty = $(this).parents().eq(1).find('input').val();
   var total=parseInt(pret)*parseInt(qty);
    var href = $(this).attr('href');
    var $this = $(this);
    $.ajax({
      type: "POST",
      url: href,
      data: { qtyy:qty },
      success: function(result) {
       $this.closest(".col-sm-5").next('.col-sm-2').find(".pret_prod_cos").html("total"); 
      cos();
      }
   });
 });

Upvotes: 1

Related Questions