Question

My code in a loop (I have 3 slides in my featured content slider):

<a class="featured-image <?php echo "slide-".$i; ?>" href="<?php the_permalink(); ?>">
    <?php the_post_thumbnail('featured'); ?>
</a>
<div class="featured-about <?php if($active == 1) {echo "active ";} echo "about-".$i; ?>">
    <a class="featured-title"  href="<?php the_permalink(); ?>">
         <h3><?php the_title(); ?></h3>
    </a>
    <span class="excerpt featured-excerpt"><?php the_excerpt(); ?></span>
</div>

And I need to achieve that when I click on a.featured-about the z-index of correspoding a.featured-image is changed (just e.g. adding addClass e.g. active-image is enough I will do it myself in CSS).

However I guess I need to use onclick like:

$('.featured-about').click(function() {
    $(this).prev().addClass('active-image');
});

But it is not working.

What am I doing wrong?

Answer 1

You want to use .prev:

http://jsfiddle.net/gromer/yUHqe/

$('.featured-about').click(function() {
    $(this).prevAll('a').addClass('active-image');
});​

Edit: Update with .prevAll http://jsfiddle.net/gromer/DRV9K/