Jquery Closest 和 Parent 不使用输入和嵌套 Div
我隐藏了带有“.display-link”类的 Div，这些类比输入框高两级。单击输入（复选框）时，它应该显示父级前一个同级包装器中的隐藏链接。
或者另一种说法是，当单击输入复选框时，它应该找到前一个带有 .display-link 类的 div 并 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 直至显示链接 div。
I have hidden Divs with ".display-link" classes that are two levels up from an input box. When an input (checkbox) is clicked, it should display the hidden link in the parent's previous sibling's wrapper.
Or another way to say it is, when an input checkbox is clicked it should find the previous div with the class .display-link and show() that.
I am having trouble traversing the elements to reach this div with this class. It should only display the one, previous 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>
I need to go out of the collapsible div and into the accordion-button div down to the display-link div.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
这是一个演示： http://jsfiddle.net/hazvX/
这会找到父级
.collapsible元素，查找前一个.accordion-button元素，然后选择其子.display-link元素。您的 HTML 显示有两个
.display-link元素和三个输入。如果您希望输入找到第一个可能的（之前的）.display-link元素，您可以使用.prevAll()代替.prev()< /code>:这是一个演示：http://jsfiddle.net/hazvX/1/
我还添加了
.prevAll()函数之后的.eq(0)仅获取第一个返回的元素（因为可以有多个）。请注意，
.on()是 jQuery 1.7 中的新功能，在本例中与.bind()相同。Here is a demo: http://jsfiddle.net/hazvX/
This finds the parent
.collapsibleelement, finds the previous.accordion-buttonelement, then selects it's child.display-linkelement.Your HTML shows that there are two
.display-linkelements and three inputs. If you want the inputs to find the first possible (previous).display-linkelements you can use.prevAll()in place of.prev():Here is a demo: http://jsfiddle.net/hazvX/1/
Notice I also added
.eq(0)after the.prevAll()function to only get the first returned element (since there can be multiple).Note that
.on()is new in jQuery 1.7 and in this case is the same thing as.bind().由于您要显示的
.display-link元素不是复选框的同级元素或祖先元素，因此您无法一步完成此操作。首先转到.collapsible元素，它是.accordion-button的同级元素，然后获取前一个元素，即.accordion-button> 本身，然后在其中找到.display-link元素：closest方法仅查看祖先元素，parents也是如此。prevUntil方法仅查看前面的同级。请注意，只有当您的结构保持问题中的原样时，上述方法才有效。如果您在会影响上述代码的位置添加元素，则必须相应地对其进行修改。如果您认为 DOM 可能会发生变化，您可以使其更加健壮：
Since the
.display-linkelement you want to display is not a sibling or an ancestor of the checkbox you can't do this in one step. First go up to the.collapsibleelement which is a sibling of.accordion-button, then get the previous element, which is.accordion-buttonitself, and then find the.display-linkelement within that:The
closestmethod only looks at ancestor elements, as doesparents. TheprevUntilmethod only looks at preceding siblings.Note that the above will only work if your structure stays as it is in the question. If you add elements in places that would affect the above code you will have to modify it accordingly. You could make it a bit more robust if you think the DOM may change:
父母，最亲近的人不起作用，因为它不在同一条路上。
你能给他们一个ID吗，或者把他们放在另一个容器里：
http://jsfiddle.net/Cq9Cw/
Parents, closest won't work because it isn't in the same path.
Can you give them an ID, or put them in another container:
http://jsfiddle.net/Cq9Cw/
我在这里提出的另一个解决方案是，如果每个输入都有相应的显示链接，那么您可以使用索引
http:// /jsfiddle.net/7TaqC/
当然，在您的示例中，有 3 个输入，只有 2 个链接，但是我不知道这是否是因为这只是您代码的一小段
Another solution I'll throw in here, is if each input had a corresponding display-link then you could use the index
http://jsfiddle.net/7TaqC/
Now of course in your example there are 3 inputs and only 2 links, however I don't know if this is because this is just a small snippet of your code