フロントエンド開発者は、特に要素が動的に生成される場合、ページ上で要素が配置される順序を見つける必要があることがよくあります。このとき、jQuery を使用してページ上の要素のシリアル番号を簡単に見つけると、タスクを迅速に完了できます。
以下では、jQuery を使用して最初の要素を検索する方法を紹介します。
jQuery の eq() メソッドは、特定のインデックス値を持つ要素を見つけるのに役立ちます。その使用法は次のとおりです:
$('selector').eq(index)
このうち、selector
は検索したい要素セレクター、index
はセレクター内の要素のシーケンス番号 (先頭から始まります) です。 0カウント)。
たとえば、次の HTML コードがあります:
<ul> <li>第一项</li> <li>第二项</li> <li>第三项</li> </ul>
2 番目の <li>
要素を検索する場合は、次のコードを使用できます。 ##
$('li').eq(1)
<li> 要素を含む jQuery オブジェクトが返されます。
eq() メソッドに加えて、jQuery は
:eq## も提供します。 # pseudo-class クラス セレクター。その使用法は eq()
メソッドと似ていますが、メソッドを呼び出す必要はありません。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>$('selector:eq(index)')</pre><div class="contentsignin">ログイン後にコピー</div></div>
は
メソッドと同じです。 selector
は検索する要素セレクターです。 index
は次の要素です。セレクターのシリアル番号 (0 から数えます)。 次のコードを使用して、同じ 2 番目の
要素を検索できます: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>$('li:eq(1)')</pre><div class="contentsignin">ログイン後にコピー</div></div>
これは、2 番目の
要素の jQuery オブジェクト。
内の特定の位置にある子要素を検索するなど)。現時点では、find()
メソッドを eq()
または :eq
疑似クラス セレクターと組み合わせて使用できます。 たとえば、次の HTML コードがあります:
<div id="container"> <div class="item">第一项</div> <div class="item">第二项</div> <div class="item">第三项</div> </div>
id
が ## である <div>## を検索したい場合#container
#要素内の 2 番目の子要素には、次のコードを使用できます: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>$('#container').find('.item').eq(1)</pre><div class="contentsignin">ログイン後にコピー</div></div>
または: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>$('#container .item:eq(1)')</pre><div class="contentsignin">ログイン後にコピー</div></div> どちらのメソッドも 2 番目の を含む要素を返します。 class<p> </p>item<p> の <code><div>
要素の jQuery オブジェクト。 概要
上で述べたように、jQuery を使用して最初の要素を見つけるのは非常に簡単で、
メソッドまたは
を使用するだけです。 :eq 疑似クラスセレクターで十分です。要素内の特定の位置で子要素を検索する必要がある場合は、find()
メソッドを組み合わせて使用できます。 これらのメソッドを通じて、開発者はページ上の要素の位置を簡単に決定し、要素の動的生成などのタスクを迅速に完了できます。
以上がjqueryは最初の要素を見つけますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。