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

fiddle page: http://jsfiddle.net/dus4a/3/

so basically I have 3 content to show if I press the link but the closest wont run, can u guys tell me what is wrong ?

Thanks a lot

4

3 回答 3

3

试试这个代码，

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

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

于 2013-07-22T11:22:56.760 回答
2

尝试这个

$(this).parent().next().css('display','block');
于 2013-07-22T11:20:42.177 回答
1

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/

干杯!

于 2013-07-22T11:48:22.680 回答