jQuery Traversal Closest <div> of a class
Question
So I'm trying to figure out some jQuery here. I've found some notes about jQuery traversal, but nothing seems to fit what I need.
This is a dummy that represents what I need. <div class="parent"> would actually be the start of a comment from a forum - one of many on the page. There are several <div> tags as children inside it. Inside one of those <div> tags is a <span> that has a Hide button. I need that button to hide the next <div class='specific-class'> inside the <div class="parent"> . The code below will always hide "Box 1" no matter which of the hide buttons I click. I could modify the code to give each comment a unique class, but I'd rather use some traversal magic to pick the right one.
Forgive the quickie code below, it's just here as a reference. :)
$(".hideBtn").click(function() { var element = $("div.buttons").next(".hideable:first"); if (element.hasClass("hidden")) { element.removeClass("hidden"); element.slideDown("slow"); } else { element.addClass("hidden"); element.slideUp("slow"); } });
.hideBtn { font-size: large; width: 100px; height: 20px; padding-left: 20px; padding-right: 20px; padding-top: 20px; padding-bottom: 5px; border-radius: 25px; background: #cecece; margin: 10px; text-align: center; vertical-align: middle; } .hideBtn:hover { background-color: #cccccc; } .box { width: 100px; padding: 20px; margin: 10px; height: 100px; border-radius: 25px; background: #bcbcbc; } .hideable { display: block; } .hidden { display: none; }
<head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> </head> <div class="parent"> <div class="buttons"> <div class="hideBtn"><a href="#">HIDE</a> </div> </div> <div class="box hideable">This is a hideable Box 1</div> <div class="buttons"> <div class="hideBtn"><a href="#">HIDE</a> </div> </div> <div class="box hideable">This is a hideable Box 2</div> <div class="buttons"> <div class="hideBtn"><a href="#">HIDE</a> </div> </div> <div class="box hideable">This is a hideable Box 3</div> <div class="buttons"> <div class="hideBtn"><a href="#">HIDE</a> </div> </div> <div class="box hideable">This is a hideable Box 4</div> </div>
2 answers
solution1
4 ACCPTED 2015-04-17 05:11:05
div .hidable is sibling of clicked buttons closest parent div.buttons . thus you need to traverse to .buttons and then use .next() to target the first .hideable :
var element = $(this).closest('.buttons').next();
solution2
1 2015-04-17 05:13:11
This should do the trick. You just need to refer to the current <a> button that was clicked, then find it's parent .buttons and then find the next closest element with the class .hideable . Using the next(".hideable") ensures you will always hide the correct <div class='hideable'> even if there are more elements between the .buttons and .hideable containers
$(this).closest(".buttons").next(".hideable");
Example:
$(".hideBtn").click(function(e) { var element = $(this).closest(".buttons").next(".hideable"); if (element.hasClass("hidden")) { element.removeClass("hidden"); element.slideDown("slow"); } else { element.addClass("hidden"); element.slideUp("slow"); } });
.hideBtn { font-size: large; width: 100px; height: 20px; padding-left: 20px; padding-right: 20px; padding-top: 20px; padding-bottom: 5px; border-radius: 25px; background: #cecece; margin: 10px; text-align: center; vertical-align: middle; } .hideBtn:hover { background-color: #cccccc; } .box { width: 100px; padding: 20px; margin: 10px; height: 100px; border-radius: 25px; background: #bcbcbc; } .hideable { display: block; } .hidden { display: none; }
<head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> </head> <div class="parent"> <div class="buttons"> <div class="hideBtn"><a href="#">HIDE</a> </div> </div> <div class="box hideable">This is a hideable Box 1</div> <div class="buttons"> <div class="hideBtn"><a href="#">HIDE</a> </div> </div> <div class="box hideable">This is a hideable Box 2</div> <div class="buttons"> <div class="hideBtn"><a href="#">HIDE</a> </div> </div> <div class="box hideable">This is a hideable Box 3</div> <div class="buttons"> <div class="hideBtn"><a href="#">HIDE</a> </div> </div> <div class="box hideable">This is a hideable Box 4</div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.