Find the element and append value in it using jQue…

I have three <li> inside the <ul> . Now the structure of the html looks like this

<ul>
<li>..</li>
<li>..</li>
<li>..</li>
</ul>

inside each li this is the html

 <div class="chbs-vehicle-image chbs-vehicle-image-has-gallery" style="opacity: 1;">
    </div>
    <div class="chbs-vehicle-content">                
        <div class="chbs-vehicle-content-header"> 
            <span>Sedan</span>                        
    <a href="#" class="chbs-button chbs-button-style-2">
        Select
        <span class="chbs-meta-icon-tick"></span>
    </a>                       
       </div>                   
    <div class="chbs-vehicle-content-price">€42.00</div>                
    </div>
    </div>

So when I click on the chbs-button-style-2 I want to add variable value in the chbs-vehicle-content-price div by using $(this).

this is I where I am stuck

<script type="text/javascript">

jQuery(document).ready(function($){

      $('.chbs-button-style-2').on('click', function() {
       var cust_val=35;
       alert($(this).closest('li').siblings().children().find('.chbs-vehicle-content-price').html(cust_val));
       //Here I am getting Undefined

    });
   });
   
</script>

Answer

Not sure why you are doing all of the siblings and other checks, just walk up to a common parent and find the element.

jQuery(document).ready(function($) {

  $('.chbs-button-style-2').on('click', function() {
    var cust_val = 35;
    $(this).closest('.chbs-vehicle-content').find('.chbs-vehicle-content-price').html(cust_val)
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="chbs-vehicle-image chbs-vehicle-image-has-gallery" style="opacity: 1;">
</div>
<div class="chbs-vehicle-content">
  <div class="chbs-vehicle-content-header">
    <span>Sedan</span>
    <a href="#" class="chbs-button chbs-button-style-2">
        Select
        <span class="chbs-meta-icon-tick"></span>
    </a>
  </div>
  <div class="chbs-vehicle-content-price">€42.00</div>
</div>

Find the element and append value in it using jQuery

Advertisement

Answer