How can we add class to the first div with jquery?

I have HTML like

<div class="main">
  <div class="sub"></div>
  <div class="sub"></div>
  <div class="sub"></div>
</div>
<div class="main">
  <div class="sub"></div>
  <div class="sub"></div>
  <div class="sub"></div>
</div>

and I want to add a class to all the first div having class sub and parent main. ie; I wanted HTML like

<div class="main">
  <div class="sub newclass"></div>
  <div class="sub"></div>
  <div class="sub"></div>
</div>

<div class="main">
  <div class="sub newclass"></div>
  <div class="sub"></div>
  <div class="sub"></div>
</div>

How can I implement this using jquery?

Answers 1

  • You can use the below code

    ? Method 1

    $('.main').each(function(){
        $(this).find('.sub').first().addClass('newclass');
    });
    

    Working Demo

    $('.main').each(function(){
        $(this).find('.sub').first().addClass('newclass');
    });
    .newclass{
      color:red
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="main">
      <div class="sub">1</div>
      <div class="sub">2</div>
      <div class="sub">3</div>
     </div>
    <div class="main">
      <div class="sub">1</div>
      <div class="sub">2</div>
      <div class="sub">3</div>
     </div>
    <div class="main">
      <div class="sub">1</div>
      <div class="sub">2</div>
      <div class="sub">3</div>
     </div>
    <div class="main">
      <div class="sub">1</div>
      <div class="sub">2</div>
      <div class="sub">3</div>
     </div><div class="main">
      <div class="sub">1</div>
      <div class="sub">2</div>
      <div class="sub">3</div>
     </div>

    ? Method 2

    $('.main').each(function(){
        $(this).find('.sub').eq(0).addClass('newclass');
    });
    

    Working Demo

    $('.main').each(function(){
        $(this).find('.sub').eq(0).addClass('newclass');
    });
    .newclass{
      color:red
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="main">
      <div class="sub">1</div>
      <div class="sub">2</div>
      <div class="sub">3</div>
    </div>
    <div class="main">
      <div class="sub">1</div>
      <div class="sub">2</div>
      <div class="sub">3</div>
    </div>

    ? Method 3

    $('.main').each(function(){
        $(this).find('.sub:eq(0)').addClass('newclass');
    });
    

    Working Demo

    $('.main').each(function(){
        $(this).find('.sub:eq(0)').addClass('newclass');
    });
    .newclass {
      color: red
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="main">
      <div class="sub">1</div>
      <div class="sub">2</div>
      <div class="sub">3</div>
    </div>
    <div class="main">
      <div class="sub">1</div>
      <div class="sub">2</div>
      <div class="sub">3</div>
    </div>

    References

    ? .first()

    ? .eq()

    ? :eq()


Related Articles