jQuery_jqueryでのclosest()関数の使用例

この記事の例では、jQuery での最も近い() 関数の使用法について説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

この関数は要素自体から開始し、上位の要素を段階的に照合し、最初に一致した要素を返します。
close() 関数は、まず現在の要素が一致するかどうかを確認し、一致する場合は要素自体を直接返します。一致するものがない場合は、セレクターに一致する要素が見つかるまで、レイヤーごとに親要素を上方向に検索します。何も見つからない場合は、空の jQuery オブジェクトが返されます。

文法構造 1:

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

$(selector).closest(expr, context)

パラメータリスト:

参数	描述
expr	用以过滤元素的表达式
context	可选。作为待查找的 DOM 元素集或者文档。

コード例:

例 1:

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

<頭>




<スクリプトタイプ="text/javascript">
$(document).ready(function(){
$(".father p").closest("div").css("color","green");
})

私は div
です。

私は孫です p

私は私の息子です

私は兄弟ですp

例 2:

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

<頭>




<スクリプトタイプ="text/javascript">
$(document).ready(function(){
$("#children p").closest("#father",document.getElementById("children")).
css("border","1px 赤一色");
})

私は孫です p

私は私の息子です

私は兄弟ですp

父親のIDを持つdivは子のIDを持つdiv内にないため、その境界線を赤に設定することはできません。

文法構造 2:

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

$(selector).closest(element)

パラメータリスト:

参数	描述
element	用于匹配元素的DOM元素或者jQuery元素。

コード例:

例 1:

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

<頭>




<スクリプトタイプ="text/javascript">
$(document).ready(function(){
$("#children p").closest(document.getElementById("children")).
css("border","1px 赤一色");
})

私は孫です p

私は私の息子です

私は兄弟ですp

例 2:

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

<頭>




<スクリプトタイプ="text/javascript">
$(document).ready(function(){
$("#children p").closest($("#children")).css("border","1px 単色赤");
})

私は孫です p

私は私の息子です

私は兄弟ですp

この記事が皆さんの jQuery プログラミングに役立つことを願っています。