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>

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>

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Mar 3, 2015 at 12:44 A.L 10.5k1010 gold badges7272 silver badges105105 bronze badges asked Mar 3, 2015 at 9:58 JustinasJustinas 1311 silver badge22 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

You can use :last-child selector:

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

Working Demo

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./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>

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

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

use last()

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

Use this

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