CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Justinas
Justinas

Reputation: 13

How to find last div in each div with jquery?

I want to add class to each last "content-inside" inside class "content". How to achieve this with jQuery? My final result should look like this:

<div class="content">
    <div class="content-inside"></div>
    <div class="content-inside"></div>
    <div class="content-inside last"></div>
</div>
<div class="content">
    <div class="content-inside last"></div>
</div>
<div class="content">
    <div class="content-inside"></div>
    <div class="content-inside last"></div>
</div>

Upvotes: 0

Views: 8725

Answers (5)

Yogesh Sharma
Yogesh Sharma

Reputation: 2017

Please use below JS code to find last div and add class

$('.content').each(function(){
$(this).find(".content-inside").filter(":last").addClass("last");
});

Upvotes: 1

I&#39;m Geeker
I&#39;m Geeker

Reputation: 4637

Use this

$('.content').each(function(){
$(this).find(".content-inside").last().addClass("last");
});

Upvotes: 0

lshettyl
lshettyl

Reputation: 8181

use last()

$('.content .content-inside').last().addClass('last');

Upvotes: 0

jbutler483
jbutler483

Reputation: 24559

With JQuery, you need to think of selecting as you would with css.

  • To add 'content-inside', you can select via $(.content div)
  • To add 'last', you can select via $(.content div:last-child)

This means that your JQuery will be:

   $('.content div').addClass("content-inside");
   $('.content div:last-child').addClass("last");

DEMO

$('button').click(function() {
  $('.content div').addClass("content-inside");
  $('.content div:last-child').addClass("last");
});
.content-inside {
  color: red;
}
.last {
  color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
<div class="content">
  <div>4</div>
</div>
<div class="content">
  <div>5</div>
  <div>6</div>
</div>
<button>Add 'content-inside'</button>

Upvotes: 1

Milind Anantwar
Milind Anantwar

Reputation: 82241

You can use :last-child selector:

$('.content .content-inside:last-child').addClass('last');

Working Demo

Upvotes: 3

Related Questions