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