CODEWITHSUNDEEP
jqueryhtmlcss
juiceman
juiceman

Reputation: 123

Add div after every third post

I found this post which does what I want: Append Span Tag, after every 3rd div Jquery http://jsfiddle.net/pxaS4/2/

But I am using a three column layout. I'd like to clear:both after every third post so that if they differ in height, they will always stay 3 to a row.

html:

<div class="post-listing">

    <div class="post-item">
    This text make the post-item different height.
    </div>

    <div class="post-item">
    This text make the post-item different height. This text make the post-item different height.
    </div>

    <div class="post-item">
    This text make the post-item different height. 
    </div>

    <div class="post-item">
    This text make the post-item different height. This text make the post-item different height. This text make the post-item different height.
    </div>

    <div class="post-item">
    This text make the post-item different height.
    </div>

    <div class="post-item">
    This text make the post-item different height. This text make the post-item different height.
    </div>

    <div class="post-item">
    This text make the post-item different height. This text make the post-item different height. This text make the post-item different height.
    </div>

    <div class="post-item">
    This text make the post-item different height.
    </div>

    <div class="post-item">
    This text make the post-item different height.
    </div>

</div>

CSS:

.clear {
  clear: both;
  color: #000;
}

.post-listing {
  width: 300px;
}

.post-listing .post-item {
  float: left;
  color: red;
  background: #ccc;
  width: 32%;
  margin-right: 2%;
  margin-bottom: 30px;
}

.post-listing :nth-child(3n+0).post-item {
  margin-right: 0%;
  clear: right;
}

This seems to be working fine. The issue is when I try to add a div class"clear" with jquery after every third post. This is what I have and it's not working:

$('div.post-listing > div.post-item:nth-child(3n)').after('<div class="clear">this is the clear class</div>');

jsfiddle (non-working) here:jsfiddle

Any help is greatly appreciated. Thanks

Upvotes: 2

Views: 3615

Answers (2)

Alex Wright
Alex Wright

Reputation: 456

First off, the reason your jQuery is not working is that jQuery is not being loaded in your fiddle. If you load the latest jQuery framework, your jQuery code works fine.

Second, what you're looking to do can be accomplished in just CSS.

You can target each 3rd item and remove its margin-right like so:

.post-listing .post-item:nth-child(3n) {
    margin-right: 0;
}

You can also clear the first item of each new row like so:

.post-listing .post-item:nth-child(3n+1) {
    clear: both;
}

Since there are three items in each row, we put 3n. This means that regardless of how many rows you have, you will always be targeting the correct number of items. The +1 will grab the next .post-listing item after the last item in the previous row.

For example, say you have two rows, with 3 items in each row. Using nth-child(3n+1) will select items number 1 and 4.

The first iteration of n is 0. (3 * 0) + 1 = 1

The second iteration of n is 1. (3 * 1) + 1 = 4

Here is the link to the updated fiddle with just CSS: https://jsfiddle.net/936qtbu5/4/

Upvotes: 2

pavel
pavel

Reputation: 27072

You don't need to add new divs. Add clear: left to 3n+1 .post-item.

.post-item:nth-child(3n+1) {clear: left;}

https://jsfiddle.net/936qtbu5/1/

Upvotes: 6

Related Questions