Jquery Question posted in
The official Jquery Api Documentation can be found here.

Getting the first element in multiple divs jQuery

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>
Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search