CODEWITHSUNDEEP
jqueryhtml
Shafeeque S
Shafeeque S

Reputation: 2613

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?

Upvotes: 1

Views: 3869

Answers (3)

Rino Raj
Rino Raj

Reputation: 6264

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()

Upvotes: 2

Shubham Khatri
Shubham Khatri

Reputation: 281922

You can also try this:

$('.main div:first-child').addClass('newClass');

I have a working demo here JSFiddle: https://jsfiddle.net/mayank_shubham/8xeaybhL/1/

Upvotes: 2

Lalji Tadhani
Lalji Tadhani

Reputation: 14169

Use selector to :first 

$('.main .sub:first').addClass('newclass');

Upvotes: 0

Related Questions