CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Keenan
Keenan

Reputation: 369

jQuery Traversal Closest <div> of a class

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>

Upvotes: 0

Views: 67

Answers (2)

Jayden Meyer
Jayden Meyer

Reputation: 743

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>

Upvotes: 1

Milind Anantwar
Milind Anantwar

Reputation: 82231

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();

Working Demo

Upvotes: 4

Related Questions