jqueryで兄弟ノードのコンテンツ値を見つける方法

青灯夜游
リリース: 2022-08-15 18:13:04
オリジナル
1841 人が閲覧しました

実装手順: 1. 兄弟ノードを走査する関数 (siblings()、next() など) を使用して、指定された要素の兄弟ノードを取得します。構文は「要素を指定します。走査関数を指定します」です。 "; 2. text() を使用するか、html() 関数を使用して、選択したノードのコンテンツ値を取得します。構文は「sibling node.text()」または「sibling node.html()」です。

jqueryで兄弟ノードのコンテンツ値を見つける方法

このチュートリアルの動作環境: Windows7 システム、jquery3.6.0 バージョン、Dell G3 コンピューター。

jquery は兄弟ノードのコンテンツ値を検索します。次の 2 つの部分が表示されます。

  • #兄弟ノードの検索

  • 選択したノードのコンテンツ値を取得します

ステップ 1. 兄弟ノードを検索します

jquery には、さまざまな取得方法が用意されています。兄弟ノード 通常、次の 7 つの関数があります:

  • siblings() メソッド。これは主に、指定された要素の同じレベルのすべての兄弟要素を取得するために使用されます

  • next () メソッド、主に指定された要素の次の兄弟要素を取得するために使用されます。

  • nextAll() メソッド、主に次の兄弟要素のすべての兄弟要素を取得するために使用されます。指定された要素の

  • nextUntil() メソッドは主に、指定された要素の次の兄弟要素を取得するために使用されます。この兄弟要素は、指定された要素と、によって設定された要素との間の要素である必要があります。 nextUntil() メソッド

  • prev() メソッド。主に、指定された要素の上位レベルの兄弟要素を取得するために使用されます。

  • #prevAll()主に、指定された要素の上位レベルを取得するために使用されるメソッド すべての兄弟要素

  • prevUntil() メソッドは、主に、指定された要素の前の兄弟要素を取得するために使用されます。指定された要素と prevUntil() メソッドによって設定された要素の間にある必要があります。Element

例: next() を使用して、選択した要素 h2

の次の兄弟ノードを取得します

$("h2").next()
ログイン後にコピー

ステップ 2. 選択したノードのコンテンツ値を取得します。

  • text() メソッドを使用して、選択したノードのテキスト コンテンツを設定します

例 1: 次の兄弟ノードのコンテンツ値を取得する

         
         
div (父)

p(兄弟元素)

span(兄弟元素)

h2(本元素)

h3(兄弟元素)

p(兄弟元素)

ログイン後にコピー

jqueryで兄弟ノードのコンテンツ値を見つける方法

例 2: すべての兄弟ノードのコンテンツ値を取得するノード

$(document).ready(function() { $("button").click(function() { $("h2").siblings().css("color","red"); var con=$("h2").siblings().text(); console.log(con); }); });
ログイン後にコピー

jqueryで兄弟ノードのコンテンツ値を見つける方法

    #Use html ()選択したノードのコンテンツを設定します(innerHTML)
  • 例:前の兄弟ノードのコンテンツ値を取得します
$(document).ready(function() { $("button").click(function() { $("h2").next().css("color","red"); var con=$("h2").next().html(); console.log(con); }); });
ログイン後にコピー

jqueryで兄弟ノードのコンテンツ値を見つける方法【推奨される学習:

jQuery ビデオ チュートリアル

Web フロントエンド ビデオ]

以上がjqueryで兄弟ノードのコンテンツ値を見つける方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のおすすめ
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!