it-swarm-ja.tech

jquery next()を使用してクラスで次のdivを選択する方法

私はjqueryにかなり慣れていないので、かなり単純なものに苦労しています。 「MenuItemSelected」クラスのdivから「MenuItem」クラスの前後のdivを選択したい。

HTML

<div id="MenuContainer" class="MenuContainer">
    <div id="MainMenu" class="MainMenu">
        <div class="MenuItem">
            <div class="MenuItemText">Menu Item #1</div>
            <div class="MenuItemImage">images/test1.jpg</div>
        </div>    
        <div class="MenuDividerContainer">
            <div class="MenuDivider"></div>
        </div>
        <div class="MenuItem MenuItemSelected">
            <div class="MenuItemText">Menu Item #2</div>
            <div class="MenuItemImage">images/test2.jpg</div>
        </div>
        <div class="MenuDividerContainer">
            <div class="MenuDivider"></div>
        </div>
        <div class="MenuItem">
            <div class="MenuItemText">Menu Item #3</div>
            <div class="MenuItemImage">images/test3.jpg</div>
        </div>
    </div><!--/ .MainMenu -->
</div><!--/ .MenuContainer -->

これは私がうまくいくはずだと思った次のjqueryです。

$('div.MenuItemSelected').next('.MenuItem');

私も試しました

$('div.MenuItemSelected').nextAll('.MenuItem');

私が仕事に就ける唯一のことは

$('div.MenuItemSelected').next().next();

面白そうですね、何かアイデアはありますか?

21
Ryan Sampson

やってみました:

$('div.MenuItemSelected').nextAll('.MenuItem:first');

あなたが直面している問題は、nextが次の兄弟を返すのに対し、nextAllはセレクターに一致する後続のすべての兄弟のコレクションを返すことだと思います。 :firstnextAllフィルターへのセレクターは正しく動作するはずです。

指摘したいのは、マークアップの構造が一貫している場合(常に機能することが保証されている場合)、現在の解決策might(ベンチマーク、ベンチマーク、ベンチマーク)より高速な方法:

$('div.MenuItemSelected').next().next();
43
karim79

あなたは試しましたか:.parent()と.children()? http://docs.jquery.com/Traversing

4
Achilles