CODEWITHSUNDEEP
jqueryhtmlfindclosest
dubbs
dubbs

Reputation: 1199

jQuery FIND div local to the button clicked on

I am trying to locate a DIV that is located near to the button I am clicking on but cant seem to locate it... Code is as below. Basically my use of closest or find or prev of children or parent does not seem to locate the ".tweetButtonOverlayWrapper" DIV to toggle the class as per jQuery call... Any ideas what I am doing wrong???

jQUERY:

$('.tweetActionsButtonWrapper a').click(function () {
    $(this).closest('div.tweetButtonOverlayWrapper').toggleClass('tweetButtonOverlayWrapperON');
});

HTML:

<ul>
<li>

<!-- Overlay Buttons -->
<div class="tweetButtonOverlayWrapper" id="tweet"><p>content</p></div>
<!-- end of Overlay Buttons -->

<div class="tweetDetailContentWrapper">
<div class="tweetAvatarBorder"></div><div class="tweetAvatar"><p>content</p></div>
<div class="tweetDetailWrapper">
<p class="tweetDetailAutor"><a href="#">@name</a> <span class="tweetDetailAutorTimeStamp">15 minutes ago</span></p>
<p>This is where the interesting tweet will sit... Easily allows us to display all 140 characters which is the maximum any tweet will allow....</p>
</div>
<div class="tweetActionsButtonWrapper"><a href="#" class="timeSegment-link tweetActionsButtonNoRightAlign" title="">More actions</a></div>
</div>

</li>

<li>

<!-- Overlay Buttons -->
<div class="tweetButtonOverlayWrapper" id="tweet"><p>content</p></div>
<!-- end of Overlay Buttons -->

<div class="tweetDetailContentWrapper">
<div class="tweetAvatarBorder"></div><div class="tweetAvatar"><p>content</p></div>
<div class="tweetDetailWrapper">
<p class="tweetDetailAutor"><a href="#">@name</a> <span class="tweetDetailAutorTimeStamp">15 minutes ago</span></p>
<p>This is where the interesting tweet will sit... Easily allows us to display all 140 characters which is the maximum any tweet will allow....</p>
</div>
<div class="tweetActionsButtonWrapper"><a href="#" class="timeSegment-link tweetActionsButtonNoRightAlign" title="">More actions</a></div>
</div>

</li>
</ul>

Upvotes: 0

Views: 1838

Answers (2)

Dhruva Sagar
Dhruva Sagar

Reputation: 7307

tweetButtonOverlayWrapper is sibling of the parent of 'a', the following should do it.

$('.tweetActionsButtonWrapper a').click(function () {
    $(this).parent().parent()
           .siblings('div.tweetButtonOverlayWrapper')
           .toggleClass('tweetButtonOverlayWrapperON');
    return false;
});

http://jsfiddle.net/dhruvasagar/ZzfrN/1/

Upvotes: 0

Samich
Samich

Reputation: 30145

You can't find your element because div.tweetButtonOverlayWrapper is not actually parent for your a. This will work:

$('.tweetActionsButtonWrapper a').click(function () {
    $(this).closest('div.tweetDetailContentWrapper')
           .siblings('div.tweetButtonOverlayWrapper')
           .toggleClass('tweetButtonOverlayWrapperON');
    return false;

});

code: http://jsfiddle.net/ZzfrN/

Upvotes: 1

Related Questions