为每第三个wordpress帖子添加一个类

Question

Im listing all wordpress posts in the blog category but trying to add a class called 'last' to every third 'fourcol' class

HTML

<div class="container">
    <div class="row">

    <?php query_posts('category_name=blog&showposts=10&orderby=date&order=dsc'); if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

        <div class="fourcol">
            <a href=""><h2 class="blogtitle"><?php the_title(); ?></h2></a>
            <a href="#"><img src="images/_scroll1.jpg"></a>
            <span class="date">12 May 2011</span>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <a class="more" href="#">Keep reading</a>
                </div><!-- fourcol END -->

            <?php endwhile; endif; ?>
        </div><!-- row END -->
    </div><!-- container END -->

Hope this makes sense?

Answer 1

EDIT:

var i = 1;
$('#row .fourcol').each(function() {
    if(i++ % 4 == 0) 
        $(this).addClass('last'); 
});

---

$('.fourcol').eq(3).addClass('last');

Answer 2

<?php query_posts('category_name=blog&showposts=10&orderby=date&order=dsc'); 
if ( have_posts() ) : 
    $i=0;
    while ( have_posts() ) : 
        the_post(); 
    ++$i; 
    ?>

    <div class="fourcol<?php if($i%3==0) echo ' every-third-post' ?>" >
        <a href=""><h2 class="blogtitle"><?php the_title(); ?></h2></a>
        <a href="#"><img src="images/_scroll1.jpg"></a>
        <span class="date">12 May 2011</span>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <a class="more" href="#">Keep reading</a>
            </div><!-- fourcol END -->

        <?php endwhile; endif; ?>
    </div><!-- row END -->
</div><!-- container END -->

Try this. Should work.

Answer 3

Using CSS

Instead of

.last

Use

.fourcol:nth-child(3n+1)

Answer 4

you need the modulus operator

<?php query_posts('category_name=blog&showposts=10&orderby=date&order=dsc'); 
    $counter = 0; //add a ounter to keep track of the number post we're on
    if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    //check if the remainder of $count is 0, if so add the class 'last'
    <div class="fourcol <? if ( $count % 3 == 0 ) echo 'last' ?>">                                                        
        <a href=""><h2 class="blogtitle"><?php the_title(); ?></h2></a>
        <a href="#"><img src="images/_scroll1.jpg"></a>
        <span class="date">12 May 2011</span>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <a class="more" href="#">Keep reading</a>
    </div><!-- fourcol END -->
    <? $count++; ?>
<?php endwhile; endif; ?>

Answer 5

You can do that with PHP in your template. Just add the string last on every third post. The following variant makes use of the existing post counter in wordpress and the modulo operator . The counter starts at 0 so we add 1 to it every time:

<div class="fourcol<?php if ( !((1 + $wp_query->current_post) % 3) ) echo ' last' ?>">

This is fairly compact and the most compact solution I can imagine for wordpress on the PHP side of your theme.

The idea behind it is the following:

Add a variable as a counter, count it up on every post and if it is 3, set it to 0 again and add the class.

The following script shows each of this step: Define the counter if it does not exists, count it up, reset it to 0 if applicable and do the echo:

<div class="fourcol<?php

  isset($iposts) || $iposts = 0;

  if (++$iposts === 3)
  {
    $iposts = 0;

    echo ' last';
  }

 ?>">

That's for demonstration only. As you're using the standard query object, it's much more easy as we can re-use an existing variable. Additionally making use of the modulo operator helps to find every X element.

Answer 6

if ( have_posts() ) : while( have_posts() ) : the_post();
//Loop code goes here. 
if ( 0 == $count%4 ) {
    echo 'div class="clrFix"></div>';
}
endwhile; 
if ( 0 != $count%4 ) {
   echo 'div class="clrFix"></div>';

}

Here add a clrFix div after every 4 post.