Question

我使用“.display-link”类隐藏了Div，它们是一个输入框两级。单击输入（复选框）时，它应显示父级先前兄弟包装中的隐藏链接。

或者另一种说法是，当点击一个输入复选框时，它应该找到前面的div，其中包含类.display-link和show（）。

我无法通过此课程遍历元素以达到此div。它应该只显示前一个div。

<!DOCTYPE HTML>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>

$(document).ready(function(){

$(".display-link").hide();//hide all links

$('input').click (function ()
    {
    $(this).closest(".display-link").show();//doesn't work
    $(this).closest("div.display-link").show();//doesn't work
    myInput = $(this);
    $(myInput).closest(".display-link").show();//doesn't work
    $(myInput).parents(".display-link").show();//doesn't work
    $(myInput).prevUntil(".display-link").show();//doesn't work
    });
});
</script>
</head>

<body>
<div class="accordion-button">First Heading
  <div class="display-link">LINK</div>
</div>
<div class="collapsible">
  <div class="input-row">
    <input id="checkbox01" name="checkbox01" type="checkbox" value="value01"  />
    <label for="checkbox01" >Name 1</label>
  </div>
  <div class="input-row">
    <input id="checkbox02" name="checkbox02" type="checkbox" value="value02"  />
    <label for="checkbox02" >Name 2</label>
  </div>
</div>
<div class="accordion-button">Second Heading
  <div class="display-link">LINK</div>
</div>
<div class="collapsible">
  <div class="input-row">
    <input id="checkbox03" name="checkbox03" type="checkbox" value="value03"  />
    <label for="checkbox03" >Name 3</label>
  </div>
</div>
</body>
</html>

我需要走出可折叠的div并进入手风琴按钮div，直到display-link div。

Answer 1

由于您要显示的.display-link元素不是复选框的兄弟或祖先，因此您无法在一个步骤中执行此操作。首先转到.collapsible元素，该元素是.accordion-button的兄弟，然后获取前一个元素.accordion-button本身，然后在其中找到.display-link元素：

$(":checkbox").click(function() {
    $(this).closest(".collapsible").prev().find("display-link").show();
});

closest方法仅查看祖先元素，parents也是如此。 prevUntil方法只查看前面的兄弟姐妹。

请注意，只有当您的结构保持在问题中时，上述内容才有效。如果在可能影响上述代码的位置添加元素，则必须相应地修改它。如果您认为DOM可能会发生变化，您可以使其更加健壮：

$(this).closest(".collapsible").prevAll(".accordion-button:first").find(".display-link").show();

Answer 2

$('input').on('click', function () {
    $(this).parents('.collapsible').prev('.accordion-button').children('.display-link').show();
});

以下是演示：http://jsfiddle.net/hazvX/

这会找到父.collapsible元素，找到上一个.accordion-button元素，然后选择它的子.display-link元素。

您的HTML显示有两个.display-link元素和三个输入。如果您希望输入找到第一个可能的（上一个）.display-link元素，可以使用.prevAll()代替.prev()：

$('input').on('click', function () {
    $(this).parents('.collapsible').prevAll('.accordion-button').eq(0).children('.display-link').show();
});

以下是演示：http://jsfiddle.net/hazvX/1/

注意我还在.eq(0)函数之后添加了.prevAll()以仅获取第一个返回的元素（因为可能有多个）。

请注意.on()是jQuery 1.7中的新增内容，在这种情况下与.bind()相同。

Answer 3

亲近的父母不会工作，因为它不在同一条道路上。

您可以给他们一个ID，或者将它们放在另一个容器中： http://jsfiddle.net/Cq9Cw/

Answer 4

我将在这里提出的另一个解决方案是，如果每个输入都有相应的显示链接，那么你可以使用索引

http://jsfiddle.net/7TaqC/

现在当然在你的例子中有3个输入而且只有2个链接，但是我不知道这是不是因为这只是你代码的一小部分

$(".display-link").hide();//hide all links

$('input').click (function (e)
{
   $this = $(this);
var index = $('input').index($this);
$('.display-link').eq(index).show();

});

Jquery最近和父母不使用输入和嵌套Div

4 个答案: