1

我不能直接使用 $('commentbody') 因为有很多评论和选择需要在这个特定区域内完成。

html:

<div class="commentline">
    <div class="carrowholder">
        <div class="ctoggle"></div>
        <div class="arrowwrap">
        </div>
    </div>
    <div class="commentholder">
        <div class="commenttitle">
            Title
        </div>
        <div class="commentbody">
            Body
        </div>
    </div>
</div>

jQuery：

$('.ctoggle').click(function(e) {
    $(this).parent().next('.commentholder > .commentbody').hide();
})
4

4 回答 4

2

您的尝试失败，因为您正在寻找与选择器匹配的父元素的兄弟：

.commentholder > .commentbody

没有兄弟姐妹会匹配那个（.commentholder是兄弟姐妹，但你正在寻找那个的孩子），所以你需要将孩子选择器移出。您可以使用children（或find）：

$('.ctoggle').click(function(e) {
    $(this).parent().next().children('.commentbody').hide();
});
于 2012-06-15T22:35:20.267 回答
0 
$('.ctoggle').click(function(e) {
    $(this).parent().next().find('.commentbody').hide();
})
于 2012-06-15T22:34:51.140 回答
0

来自 API 文档：“获取匹配元素集中每个元素的紧随其后的同级。如果提供了选择器，则仅当它与该选择器匹配时才检索下一个同级。”

因此，您的选择器匹配兄弟姐妹的孩子，因此您将一无所获。尝试：

var x = $(this).parent().next('.commentholder');
x.find('.commentbody').hide();

（这在您的示例中有效）

于 2012-06-15T22:40:55.133 回答
0

给定以下 HTML：

<!DOCTYPE html>
<html>
<head>
[include jQuery here]
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
</style>
</head>
<body>
  <div class="commentline">
    <div class="carrowholder">
        <div class="ctoggle">Click to toggle</div>
        <div class="arrowwrap">
        </div>
    </div>
    <div class="commentholder">
        <div class="commenttitle">
            Title 1
        </div>
        <div class="commentbody">
            Body 1
        </div>
    </div>
  <div class="commentline">
    <div class="carrowholder">
        <div class="ctoggle">Click to toggle</div>
        <div class="arrowwrap">
        </div>
    </div>
    <div class="commentholder">
        <div class="commenttitle">
            Title 2
        </div>
        <div class="commentbody">
            Body 2
        </div>
    </div>
</div>
</body>
</html>

此 Javascript 将起作用：

$('.ctoggle').click(function(e) {
    $(this).closest('.commentline').find('.commentbody').toggle();
});

这样做是在 DOM 中找到第一个具有类的元素.commentline（它是所有 DIV 的父注释），然后它在 DOM 树的该分支中找到所有具有该类的元素.commentbody，在这种情况下很好，因为每个评论行只有一个评论体。.commentbody如果每个 DIV 中有更多DIV，.commentline那么您需要进一步指定哪个 DIV（使用.first()或.find()再次等）。

已经提到了其他解决方案，但我发现这种方法更具可读性，因此可维护 - 但这是我的观点：O）

于 2012-06-15T22:45:08.120 回答