Trying to apply css to the first element in multiple divs with the same class. In the example below, it works in the first div, but not the second one. What’s wrong with this picture?
<script>
$(document).ready(function(){
$(".axxs-tabs").each(function(){
$("ul li:first a").css("background-color", "yellow");
});
});
</script>
<div class="axxs-tabs">
<ul>
<li><a href="#">This is the first paragraph.</a></li>
<li><a href="#">This is the second paragraph.</a></li>
<li><a href="#">This is the last paragraph.</a>
</ul>
</div>
<div class="axxs-tabs">
<ul>
<li><a href="#">This is the first paragraph.</a></li>
<li><a href="#">This is the second paragraph.</a></li>
<li><a href="#">This is the last paragraph.</a>
</ul>
</div>
2
Answers
If you want to take into account the ancestor with class
axxs-tabs
, your selector within theeach
loop should take into account that element.You can do so by searching the descendants of that element inside the
each
block:Just use
:first-child
selector without.each()
function: