0

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>
Improve this question
4
  • As a side note, your each function is useless; you aren't using the result of that iteration. It's just going to repeat the inner code several times.
    – Tim Roberts
    Commented Jul 6 at 19:10
  • That's not very helpful. If I remove that part and just do this: $(".axxs-tabs ul li:first a").css("background-color", "yellow"); it doesn't work either.
    – DeanH
    Commented Jul 6 at 19:40
  • What I was trying to point out is the issue mgarcia fixed below. You needed to use this within the function to use the result of the each.
    – Tim Roberts
    Commented Jul 6 at 23:18
  • $(".axxs-tabs ul li:first-child a")
    – fdomn-m
    Commented Jul 7 at 15:41

2 Answers 2

Reset to default
1

If you want to take into account the ancestor with class axxs-tabs, your selector within the each loop should take into account that element.

You can do so by searching the descendants of that element inside the each block:

$(document).ready(function(){
    $(".axxs-tabs").each(function(){
        $(this).find("ul li:first a").css("background-color", "yellow");
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></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>

Improve this answer
1
  • Excellent. Thanks much for the assistance.
    – DeanH
    Commented Jul 6 at 20:45
1

Just use :first-child selector without .each() function:

$(".axxs-tabs li:first-child>a").css("background-color", "yellow");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></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>

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.