Question

所以我想在这里找出一些jQuery。我发现了一些关于jQuery遍历的注释，但似乎没有任何东西适合我需要的东西。

这是一个代表我需要的假人。 <div class="parent">实际上是来自论坛的评论的开始 - 该页面上的众多评论之一。其中有几个<div>个标签作为子项。其中一个<div>代码中的一个<span>有一个隐藏按钮。我需要该按钮来隐藏<div class='specific-class'>中的下一个<div class="parent">。无论我点击哪个隐藏按钮，下面的代码都会隐藏“Box 1”。我可以修改代码以给每个注释一个唯一的类，但我宁愿使用一些遍历魔法来选择正确的类。

原谅下面的快速代码，它只是作为参考。：）

$(".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>

Answer 1

div .hidable是最接近父级div.buttons的点击按钮的兄弟。因此，您需要遍历.buttons，然后使用.next()定位第一个.hideable：

var element = $(this).closest('.buttons').next();

<强> Working Demo

Answer 2

这应该可以解决问题。您只需要引用已点击的当前<a>按钮，然后找到它的父.buttons，然后找到与类.hideable匹配的下一个最接近的元素。即使next(".hideable")和<div class='hideable'>容器之间有更多元素，使用.buttons也可确保您始终隐藏正确的.hideable

$(this).closest(".buttons").next(".hideable");

示例：

＆＃13;

$(".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");
  }
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

jQuery Traversal最近的<div>类</div>

2 个答案: