ホームページ ウェブフロントエンド jsチュートリアル 子ノードと親ノードを取得するための jquery サンプル コード_jquery

子ノードと親ノードを取得するための jquery サンプル コード_jquery

May 16, 2016 pm 05:22 PM
jquery

1. 子ノードを取得します

たとえば、$('#test') という ID を持つ div 要素を選択します。クラスデモでこの div の下のクラスを検索します。span 要素にはいくつかのメソッドがあります。
1. フィルター条件を使用します。

$('#test scan.demo')

2. を使用します。 find() 関数

$('#test').find('span.demo')

3. Children() 関数を使用します

$('# test').children('span.demo')

2. 親ノードを取得します
jquery には、parent()、parents など、親要素を取得するさまざまな方法があります。 ()、closest()、これらは検索の実現に役立ちます。 親要素またはノード
コードをコピー コードは次のとおりです。

<ul class="parent1" >
<li><a href="#" id="item1">jquery は親ノードを取得します</a> </li>
<li><a href= "#">jquery は親要素を取得します</a>

私たちの目的は、item1 の ID を持つノート a を通じてクラスを取得することです。parent1 の ul 要素には、次のメソッドがあります:

1.$('#item1').parent() .parent('.parent1');

2.$( 'li:parent')

3.$('#items').parents('.parent1');

4.$('#items1').closest(' .parent1');

closest は、まず現在の要素が一致するかどうかを確認し、一致する場合は、要素自体。一致するものがない場合は、セレクターに一致する要素が見つかるまで、レイヤーごとに親要素を上方向に検索します。何も見つからない場合は、空の jQuery オブジェクトが返されます。

最近接要素と親要素の主な違いは次のとおりです。 1. 前者は現在の要素から一致と検索を開始しますが、後者は親要素から一致と検索を開始します。 2. 前者は、上方向に向かって段階的に検索します。一致する要素を見つけて停止します。後者はルート要素まで上方に検索し、これらの要素を一時コレクションに入れてから、指定されたセレクター式を使用して 3 をフィルターします。後者には、0、1、または複数の要素が含まれる場合があります。 close は、イベントの委任を処理する場合に便利です。
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

jQueryのリファレンスメソッドを詳しく解説:クイックスタートガイド jQueryのリファレンスメソッドを詳しく解説:クイックスタートガイド Feb 27, 2024 pm 06:45 PM

jQueryのリファレンスメソッドを詳しく解説:クイックスタートガイド

jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか? jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか? Feb 28, 2024 pm 03:12 PM

jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか?

jQueryで要素の高さ属性を削除するにはどうすればよいですか? jQueryで要素の高さ属性を削除するにはどうすればよいですか? Feb 28, 2024 am 08:39 AM

jQueryで要素の高さ属性を削除するにはどうすればよいですか?

jQuery のヒント: ページ上のすべての a タグのテキストをすばやく変更する jQuery のヒント: ページ上のすべての a タグのテキストをすばやく変更する Feb 28, 2024 pm 09:06 PM

jQuery のヒント: ページ上のすべての a タグのテキストをすばやく変更する

徹底した分析: jQuery の長所と短所 徹底した分析: jQuery の長所と短所 Feb 27, 2024 pm 05:18 PM

徹底した分析: jQuery の長所と短所

jQuery を使用してすべての a タグのテキスト コンテンツを変更する jQuery を使用してすべての a タグのテキスト コンテンツを変更する Feb 28, 2024 pm 05:42 PM

jQuery を使用してすべての a タグのテキスト コンテンツを変更する

jQuery における eq の役割と応用シナリオを理解する jQuery における eq の役割と応用シナリオを理解する Feb 28, 2024 pm 01:15 PM

jQuery における eq の役割と応用シナリオを理解する

jQuery 要素に特定の属性があるかどうかを確認するにはどうすればよいですか? jQuery 要素に特定の属性があるかどうかを確認するにはどうすればよいですか? Feb 29, 2024 am 09:03 AM

jQuery 要素に特定の属性があるかどうかを確認するにはどうすればよいですか?

See all articles