Getting the first element in multiple divs jQuery

Question

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>

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