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各コメント行にはコメント本文が 1 つしかないため、この場合は問題ありません。.commentbody各DIVに複数の DIV がある場合は.commentline、さらにどの DIV を指定する必要がありますか (.first()または.find()を再度使用するなど)。

すでに言及されている他の解決策がありますが、この種のアプローチは少し読みやすく、したがって保守しやすいと思います-しかし、それは私の意見です:O)

于 2012-06-15T22:45:08.120 に答える