Targeting the parent div with jQuery

2 Views

So, here’s my situation. I have a wordpress site, and each entry has a link within the post div. 

<div class="post" id="post-133"> 
<h2><a href="post-link" rel="bookmark" title="Link to Post">Post</a></h2> 
<div class="post-date"> 
<span class="date">Tuesday, Jan. 26, 2010</span><span class="right read"><a href="#" class="noprint show_single" id="133">Read More</a></span> 
</div>

I have the height applied to the css to only show a certain amount of each post. How can I get jQuery to target the parent element to add a class, showing the whole post? Here is what I have so far. Am I on the right path?

var $j = jQuery.noConflict();
var curr = (event.target).parent('div');
$j(function() {
  $j('a.show_single').click(function() {
 $j('curr').toggleClass('show');
 return false;
  });
});
Post Views: 2

Related posts

Leave a Reply

3 comments

  1. Inside the event function, you use the this keyword to get into the proper context, and then you traverse through the DOM to find what you are looking for:

    var $j = jQuery.noConflict();
$j(function() {
    $j('a.show_single').click(function() {
        $j(this).parents('div.post').toggleClass('show');
        return false;
    });
});

  2.  var $j = jQuery.noConflict();
 $j(function() {
     $j('a.show_single').click(function() {
        $j(this).parents('div.post').toggleClass('show');
        return false;
     });
 });

  3. Your question is unclear.

    Assuming that you want to toggle the show class of the div.curr containing the a that was clicked on, you can call the closest method, like this:

    $j(this).closest('div.curr').toggleClass('show');