コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

jQuery_jquery を使用して兄弟要素を取得するいくつかの良い方法

WBOY
リリース： 2016-05-16 16:46:59
オリジナル
1500 人が閲覧しました

指定した要素の兄弟要素を取得する場合は、コンテンツの両側がセレクター式である隣接兄弟コンビネータ ( ) を使用できます。
次の例では、h1 の直接の兄弟要素 h2 をすべて取得します。

コードをコピーします コードは次のとおりです。

h1>メインタイトル

セクションタイトル


セクションタイトル ;

その他のコンテンツ ...




直接使用できます

🎜>
コードをコピー
コードは次のとおりです: $('h1 h2') // 隣接するすべての h2 要素を選択しますH1 要素の兄弟

If h1 の兄弟要素をフィルタリングするには、



コードをコピーすることもできます
コードは次のとおりです: $ ('h1').siblings('h2,h3,p') // H2、H3、H3 をすべて選択します。

現在の要素の後のすべての兄弟要素を取得したい場合は、 nextAll()
を使用できます。たとえば、次の HTML コードの場合です。



コード
コードをコピーします。
  • ;最初の項目
  • 2番目の項目
  • 4番目の項目
  • 5 番目の項目



    • 2 番目のエントリ以降の li 要素を取得したい場合は、次のようにします。コード



    コード

    をコピーします。 コードは次のとおりです。 $('li.selected' ).nextAll('li'); 上記の例は、一般的な兄弟コンビネータ (~)


    コードをコピー

    コードは次のとおりです: $('li.selected ~ li'); 直接の兄弟要素を取得するには、次のようにします。セレクターを使用せずに next() を直接使用することもできます。


    コードをコピー

    コードは次のとおりです。 var topHeaders = $('h1') ; topHeaders.next('h2').css('margin', '0);
    関連ラベル：
    兄弟元素
    ソース：php.cn
    前の記事：ユニット選択マージカラーサンプル code_jquery 次の記事：私から Nodejs を学ぶ (3) --- Node.js module_javascript スキル
    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    著者別の最新記事
    最新の問題
    CSS でフローティング要素を水平ではなく垂直にスタックするにはどうすればよいですか? 片側にメインコンテンツ、もう一方に追加コンテンツがある 2 つの列を持つ Web ページを作成しようとしています。ただし、float プロパティを使用して追加の列を左に揃えているた...
    から 2024-04-06 20:45:26
    0
    2
    386
    Web サイトから入力要素を取得できません そこで、Twitter から入力要素を取得しようとしていますが、それを実行すると、ノード ターミナルでこのようなエラーが表示され続け、その結果、このコードによって作成されたブラウザ...
    から 2024-04-06 18:59:57
    0
    1
    442
    文字列を HTML コード (配列から生成) に置き換えるトップレベルのメソッド 次のような文字列があるとします... $htmlPattern="Usernameis:#name#andusercompanyis#company#"; 部分...
    から 2024-04-06 17:40:41
    0
    2
    410
    無効な React 子要素 (見つかった: キー {clientVersion} を持つオブジェクト)。子要素のコレクションをレンダリングする場合は、代わりに配列を使用してください 複数ステップのフォームを持っているのですが、送信しようとするとこのエラーが表示されます。ただし、createOrganization スケジュールを単純な形式で使用すると、機能しま...
    から 2024-04-06 16:25:39
    0
    1
    346
    ベンダー固有の疑似要素上の JavaScript ホバー イベント 次の htmlinput タグがあります。 $("input[type='range']::-webkit-slider-thumb").on('hover',...
    から 2024-04-06 15:35:24
    0
    1
    274
    関連トピック
    詳細>
    人気のおすすめ
    人気のチュートリアル
    詳細>
    関連するチュートリアル
    人気のおすすめ
    最新のコース
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート