ホームページ >ウェブフロントエンド >jsチュートリアル >jQuery ツリー構造 selector_jquery
jQuery ツリー構造 selector_jquery
- WBOYオリジナル
- 2016-05-16 18:34:331394ブラウズ
DOM 構造は実際にはツリー構造です。jQuery が提供するツリー セレクターを使用して、DOM ツリー内のノードを選択できます。これらのツリー セレクターのメソッドには、children()、parent()、parents()、next()、prev()、sisters() が含まれます。
要素の「子」を選択します - Children()
コードをコピーします コードは次のとおりです。
- >
- 最初の列
- 2列目
- 3 列目
$("#parent").children().length //すべての「子」の数を取得します (li)、「3 」
$("#parent").children("#son1").text(); //最初の「子」(li) - 「最初の列」の値を取得します。
コードをコピー コードは次のとおりです:
- 最初の列
- 2列目
- 3 列目
$("#son1").parent().attr ("id");/ / ul - "parent" の ID を取得します
コードをコピー コードは次のとおりです。
🎜>
$("#son2 ").parents() .each(function(i){
if(i<3) //3 世代の祖先のみを表示
alert($(this).html());
}) ; 🎜>
要素の「弟」を選択します - next()
コードをコピー
3 列目
siblings()
コードをコピー
コードは次のとおりです。$("#son2").siblings().text(); //#son1 と #son3 を選択
- 最初の列
- 2 番目の列 ;
- 3 列目
$("#son2 ").parents() .each(function(i){
if(i<3) //3 世代の祖先のみを表示
alert($(this).html());
}) ; 🎜>
要素の「弟」を選択します - next()
コードをコピー
$("#son2" ).next().text (); //#son3 を選択して要素の「兄弟」を選択します
prev()
コードをコピーします prev()
コードは次のとおりです。 最初の列< ;/li> 2 列目 3 列目
$ ("#son2").prev().text(); //要素の「兄弟」を選択するには #son1 を選択します siblings()
コードをコピー
コードは次のとおりです。$("#son2").siblings().text(); //#son1 と #son3 を選択
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。