I have three <li>
inside the <ul>
. Now the structure of the html looks like this
JavaScript
x
6
1
<ul>
2
<li>..</li>
3
<li>..</li>
4
<li>..</li>
5
</ul>
6
inside each li this is the html
JavaScript
1
14
14
1
<div class="chbs-vehicle-image chbs-vehicle-image-has-gallery" style="opacity: 1;">
2
</div>
3
<div class="chbs-vehicle-content">
4
<div class="chbs-vehicle-content-header">
5
<span>Sedan</span>
6
<a href="#" class="chbs-button chbs-button-style-2">
7
Select
8
<span class="chbs-meta-icon-tick"></span>
9
</a>
10
</div>
11
<div class="chbs-vehicle-content-price">€42.00</div>
12
</div>
13
</div>
14
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
JavaScript
1
14
14
1
<script type="text/javascript">
2
3
jQuery(document).ready(function($){
4
5
$('.chbs-button-style-2').on('click', function() {
6
var cust_val=35;
7
alert($(this).closest('li').siblings().children().find('.chbs-vehicle-content-price').html(cust_val));
8
//Here I am getting Undefined
9
10
});
11
});
12
13
</script>
14
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.
JavaScript
1
7
1
jQuery(document).ready(function($) {
2
3
$('.chbs-button-style-2').on('click', function() {
4
var cust_val = 35;
5
$(this).closest('.chbs-vehicle-content').find('.chbs-vehicle-content-price').html(cust_val)
6
});
7
});
JavaScript
1
13
13
1
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
2
<div class="chbs-vehicle-image chbs-vehicle-image-has-gallery" style="opacity: 1;">
3
</div>
4
<div class="chbs-vehicle-content">
5
<div class="chbs-vehicle-content-header">
6
<span>Sedan</span>
7
<a href="#" class="chbs-button chbs-button-style-2">
8
Select
9
<span class="chbs-meta-icon-tick"></span>
10
</a>
11
</div>
12
<div class="chbs-vehicle-content-price">€42.00</div>
13
</div>