Question

<script type="text/javascript">
$(document).ready(function(){
    $('.show').click(function(e){
        $(this).closest('.b').css('display','block');
        e.preventDefault;
    });
});
</script>

<style type="text/css">
.b{ display:none; }
</style>

<div class="a"><a href="#" class="show">show content 1</a></div>
<div class="b">content 1</div>

<div class="a"><a href="#" class="show">show content 2</a></div>
<div class="b">content 2</div>

<div class="a"><a href="#" class="show">show content 3</a></div>
<div class="b">content 3</div>

小提琴页面：http://jsfiddle.net/dus4a/3/

所以基本上我有3个内容要显示我是否按下链接但最接近的不会跑，你们能告诉我出了什么问题吗？

非常感谢

Answer 1

试试这段代码，

$('.show').click(function (e) {
    e.preventDefault();
    $(this).parent().next('.b').css('display', 'block');
});

http://jsfiddle.net/dus4a/1/

Answer 2

试试这个

$(this).parent().next().css('display','block');

Answer 3

jQuery .closest()方法通过查找通过DOM树中的祖先来查找与选择器匹配的第一个元素。这意味着它只有在您寻找父母时才有效。有趣的是，.closest()方法与.parents()方法非常相似，因为它们都搜索父节点，但如果更多的元素匹配您的选择器，则后者将返回多个元素

在你的情况下，你会寻找兄弟姐妹，而不是父母。获得下一个兄弟最简单的方法是使用.next()方法。请注意，您可以在有或没有选择器的情况下使用.next()。如果在没有选择器的情况下使用它，它将返回紧随其后的兄弟，而如果你提供一个选择器，它将返回与你的选择器匹配的第一个兄弟。

按原样使用您的HTML代码，以下是您访问每个.b元素（链接的父级）旁边的.a元素的方式：

<script type="text/javascript">
$(document).ready(function(){
    $('.show').click(function(e){
        $(this).parent()   // Get the ".a" first
               .next('.b') // Get the next element after ".a" and that matches ".b" (could also be used without selector)
               .css('display','block');
        e.preventDefault;
    });
});
</script>

<style type="text/css">
.b{ display:none; }
</style>

<div class="a"><a href="#" class="show">show content 1</a></div>
<div class="b">content 1</div>

<div class="a"><a href="#" class="show">show content 2</a></div>
<div class="b">content 2</div>

<div class="a"><a href="#" class="show">show content 3</a></div>
<div class="b">content 3</div>

在这里，您可以看到这个确切的代码：http://jsfiddle.net/YVNDy/6/

干杯！

.closest（）不工作？

3 个答案: