4

次のシナリオでjQueryを学習しようとしています。このために、私は複数のSOの質問を読んだ後、次のjQueryを試しました。しかし、それは機能しませんでした

$(this).closest('.viewLogText').parent().find('.reportLog').css("display", "none");

シナリオ:

Cssクラス「repeaterRecord」を持つdivには3つの子div要素があります。子divには、cssクラス(repeaterIdentifier、viewLogTitle、およびreportLog)があります。

この構造を持つ2つのdivがあります(Cssクラス「repeaterRecord」を持つdiv)。

ここに画像の説明を入力してください

viewLogクラスのdivは次のようになります。

   <div class="viewLogTitle">
        <div class="viewLogText">
            View Report Log
        </div>
        <div>
            <img alt="Expand" src="Images/PlusIcon.GIF" class="expandLogIcon" />
            <img alt="Collapse" src="Images/MinusIcon.GIF" class="collapseLogIcon" />
        </div>
    </div>

CollapseLogIcon画像をクリックすると、「reportLog」クラス(「viewLogTitle」と同じレベル)で最も近いdivを非表示にする必要があります(のみ)。jQueryを使用してそれを行うにはどうすればよいですか?

更新された作業例

http://jsfiddle.net/Lijo/L9w4F/11/および http://jsfiddle.net/Lijo/L9w4F/8/および http://jsfiddle.net/Lijo/L9w4F/12/

参照

  1. 次の一致する兄弟を見つけるための効率的で簡潔な方法?

  2. jquery select siblings'until'

4

3 に答える 3

5

を使用.siblings()して、最も近いを見つけることができますdiv

APIはこちら

于 2012-08-08T10:03:02.510 に答える
2

私は使用することをお勧めします:

$(this).closest('.viewLogTitle').next('.reportLog').hide();

next()メソッド( )に渡されるフィルターは'.reportLog'、要素の次の兄弟要素がそのセレクターと一致する場合にのみviewLogTitle影響を受けることを意味することに注意してください。の次の兄弟が常にターゲットになる場合(HTMLは変更されません)、フィルターは不要であり、省略できます。.viewLogTitle

または、兄弟をフォローするために、常に連続してフォローするとは限らない場合(ただし、「最も近い」が常に影響を受けるものです):

$(this).closest('.viewLogTitle').nextAll('.reportLog:first').hide();

または、先行する兄弟の場合(.reportLog先行する場合.viewLogTitle):

$(this).closest('.viewLogTitle').prevAll('.reportLog:first').hide();

参照:

于 2012-08-08T10:04:22.920 に答える
1

siblings()次の方法を使用できます。

$(this).closest('.viewLogText').siblings('.reportLog').hide()

hide()と同じ方法を試すこともできます.css("display", "none");

于 2012-08-08T10:04:52.437 に答える