Problem with tagging previous class in jQuery
Could you take a look at this demo and let me know why I can change the background color .num
dynamically using
$(function () {
$('.panel-group .panel .panel-heading .panel-title > a ').on('click', function () {
$(this).prev().closest(".num").css("background-color", "red");
});
});
thank
$(function () {
$('.panel-group .panel .panel-heading .panel-title > a ').on('click', function () {
$(this).prev().closest(".num").css("background-color", "red");
});
});
.num {
background-color: #000000;
padding:3px 7px 3px 7px;
color:white;
border-radius: 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel-group">
<div class="panel">
<div class="panel-heading">
<div class="panel-title">
<a class="c-font" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<span class="num">1</span> Specify Energy Target
</a>
</div>
</div>
</div>
</div>
+3
source to share
3 answers
You need to take the child of the link using find () :
$('.panel-group .panel .panel-heading .panel-title > a ').on('click', function () {
$(this).find(".num").css("background-color", "red");
});
Also your selector is a long way to go, just use:
$('.panel-title > a ').on('click', function () {
$(this).find(".num").css("background-color", "red");
});
Jsfiddle work
+1
source to share
Because it .closest()
goes up the chain and your target .num
is a child a
.
By https://api.jquery.com/closest/
For each element in the set, get the first element that matches the selector by checking the element itself and traversing its ancestors in the DOM tree
Javascript only update:
$(function () {
$('.panel-group .panel .panel-heading .panel-title > a ').on('click', function () {
$(this).children(".num").css("background-color", "red");
});
});
.num {
background-color: #000000;
padding:3px 7px 3px 7px;
color:white;
border-radius: 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel-group">
<div class="panel">
<div class="panel-heading">
<div class="panel-title">
<a class="c-font" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<span class="num">1</span> Specify Energy Target
</a>
</div>
</div>
</div>
</div>
+1
source to share