Question

how to add class “last” to every div number 4 , 8 , 12 , 16 etc .
i think this is not big problem right ?

Before :

<div id="main">
    <div>Element 1</div>
    <div>Element 2</div>
    <div>Element 3</div>
    <div>Element 4</div>
    <div>Element 5</div>
    <div>Element 6</div>
    <div>Element 7</div>
    <div>Element 8</div>
    <div>Element 9</div>
    <div>Element 10</div>
    <div>Element 11</div>
    <div>Element 12</div>
</div>

After

<div id="main">
    <div>Element 1</div>
    <div>Element 2</div>
    <div>Element 3</div>
    <div class="last">Element 4</div>
    <div>Element 5</div>
    <div>Element 6</div>
    <div>Element 7</div>
    <div class="last">Element 8</div>
    <div>Element 9</div>
    <div>Element 10</div>
    <div>Element 11</div>
    <div class="last">Element 12</div>
</div>

Thanks.

Answer 1

If your markup really will be only div elements, then F. Calderan’s answer is the way to go.

If you may also have other elements in there and you want to ignore those, you’d do this:

$("#main > div").filter(function(index) {
  return index % 4 === 3;
}).addClass("last");

Live example | source

That’s because even though div:nth-child(4n) looks like it means every four divs, it doesn’t; it means divs that are the 4th, 8th, etc. element in their parent container. So if you throw others in there, it won’t work.

But again, if you only have divs, F’s answer is the way to go.