ホームページ >ウェブフロントエンド >jsチュートリアル >jqueryトラバーサルにおけるparent()とparents()の違いとparentsUntil()の詳細説明

jqueryトラバーサルにおけるparent()とparents()の違いとparentsUntil()の詳細説明

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBオリジナル
2016-05-16 17:11:211238ブラウズ

.parent(selector) セレクター (オプション) でフィルターされた、一致する要素の現在のセット内の各要素の 親要素 を取得します。

.parents(selector) セレクター (オプション) でフィルター処理された、一致する要素の現在のセット内の各要素の の祖先要素 を取得します。

DOM 要素のコレクションを表す jQuery オブジェクトがある場合、.parents() メソッドを使用すると、DOM ツリーでこれらの要素の祖先要素を検索し、最も近い親要素から順に一致する要素を含む新しい要素を構築できます。 jQueryオブジェクト。 要素は最も近い親要素から外側に向かって順番に返されます。 .parents() メソッドと .parent() メソッドは似ていますが、後者は DOM ツリーの 1 レベル上をトラバースする点が異なります。

どちらのメソッドも、$() 関数に渡した引数と同じ型のオプションのセレクター式を受け入れることができます。このセレクターが適用される場合、要素はセレクターと一致するかどうかをテストすることによってフィルター処理されます。


以下は例です

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


  • I

  • II

    • A

    • ;B

      • 1

      • 3



    • ">C< ;/li>


  • III



項目 A から開始すると、その祖先要素を見つけることができます
コードをコピー コードは次のとおりです以下:

$('li.item-a').parents().css('background-color', 'red');

これこの呼び出しの結果、レベル 2 リスト、項目 II、およびレベル 1 リスト要素 ( までの DOM ツリーの上位) が赤色の背景に設定されます。セレクター式を適用しなかったため、親要素は自然にオブジェクトの一部になります。セレクターが適用される場合、要素は組み込まれる前にセレクターと一致するかどうかがチェックされます。セレクター式を適用しなかったため、すべての祖先要素は返された jQuery オブジェクトの一部になります。セレクターが適用される場合、そのセレクター内で一致する項目のみが含まれます。

項目 A から始めると、その親要素を見つけることができます:

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

$('li.item-a').parent().css('background-color', 'red');

この結果呼び出しは、レベル 2 リストが赤色の背景を設定することです。セレクター式を適用しなかったため、親要素は自然にオブジェクトの一部になります。セレクターが適用される場合、要素は組み込まれる前にセレクターと一致するかどうかがチェックされます。

以下の例を見てください

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

body
one
hello

three
🎜> < /div>



思考:
コードをコピーします コードは次のとおりです:

$(" a").parent()
$("a").parents()
$("a").parents("div:eq(0)")
var id=$(" a").parents("div:eq(1)").children("div:eq(0)").html();

例 3
コードをコピーします コードは次のとおりです:



/div>



コードをコピーします コードは次のとおりです:
$('p').parent()
$( 'p').parent('.a ')
$('p').parent().parent()
$('p').parents()
$('p' ).parents('.a')

前のプロジェクトで使用した例を見てみましょう

コードをコピーします コードは次のとおりです。
if(mysql_num_rows($query)){
while($arr=mysql_fetch_array($query)){
echo < ;<
td>$arr[id] ]
$arr[時間]
;span class="del">削除
>admin;
}//while end;
}else{
echo "ログインログなし ";
}


jquery 関連コード



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

//選択したログを削除します
$(".delcheckbox").click(function(){
var str='';
$(".tab input[name=チェックボックス ]:チェック済み").each(function(){
str =$(this).val() ',';
});
str=str.substring(0,str.length - 1);
if(chk_Batch_PKEY(str)){
art.dialog.confirm('選択したログを削除してもよろしいですか?',function(){
$.post("myRun/ managerlog_del.php",{id:str},function(tips){
if(tips=='ok'){
,content:'削除成功',ok:function(){art.dialog. close();location.reload();}});
}else{
art.dialog.tips('削除に失敗しました ' ); ',icon:' face-sad',content:'選択してください削除するログ',ok:function(){art.dialog.close();}});
}
}).addClass("pointer");

//del イベント
$(".del").bind("click",function(event){
var _tmpQuery=$(this);
var id=$ ("input[name='id']",$(this).parents("form:first")).attr("value");
art.dialog.confirm('本当によろしいですかこのログを削除しますか? ',function(){ $.post("myRun/managerlog_del.php",{id:id},function(tips){

if(tips=='ok'){
art .dialog.tips('正常に削除されました');
_tmpQuery.parents('tr:first').hide();
}else{
🎜> >
var id=$("input[name='id']",$(this).parents("form:first")).attr("value");


参照:


parent(): http://www.w3school.com.cn/jquery/traversing_parent.asp



parents(): http://www.w3school.com.cn/jquery/traversing_parents.asp


parentUntil() メソッド

定義:parentsUntil() セレクター、DOM ノード、または jQuery オブジェクトによって一致した要素まで (ただし、要素は含まれません)、一致した要素の現在のセット内の各要素の祖先要素を取得します。

実際、parentsUntil() メソッド、nextUntil() メソッド、および prevUntil() メソッドの原理は同じです。唯一の違いは、nextUntil() が下降し、prevUntil() が上昇し (兄弟要素)、parentsUntil() も上昇する (祖先要素の検索) ことです。
以下の例を見てください:

コードをコピーします

コードは次のとおりです: