jqueryは最初の要素を見つけます

フロントエンド開発者は、特に要素が動的に生成される場合、ページ上で要素が配置される順序を見つける必要があることがよくあります。このとき、jQuery を使用してページ上の要素のシリアル番号を簡単に見つけると、タスクを迅速に完了できます。

以下では、jQuery を使用して最初の要素を検索する方法を紹介します。

<li>eq() メソッド

jQuery の eq() メソッドは、特定のインデックス値を持つ要素を見つけるのに役立ちます。その使用法は次のとおりです:

$('selector').eq(index)

このうち、selector は検索したい要素セレクター、index はセレクター内の要素のシーケンス番号 (先頭から始まります) です。 0カウント）。

たとえば、次の HTML コードがあります:

<ul>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ul>

2 番目の <li> 要素を検索する場合は、次のコードを使用できます。 ##

$('li').eq(1)

これにより、2 番目の

<li> 要素を含む jQuery オブジェクトが返されます。

:eq 疑似クラス セレクター<li>

eq() メソッドに加えて、jQuery は :eq## も提供します。 # pseudo-class クラス セレクター。その使用法は eq() メソッドと似ていますが、メソッドを呼び出す必要はありません。 <pre class='brush:php;toolbar:false;'>$('selector:eq(index)')</pre> は

eq()

メソッドと同じです。 selector は検索する要素セレクターです。 index は次の要素です。セレクターのシリアル番号 (0 から数えます)。 次のコードを使用して、同じ 2 番目の

<li>

要素を検索できます: <pre class='brush:php;toolbar:false;'>$('li:eq(1)')</pre>これは、2 番目の

要素の jQuery オブジェクト。

find() メソッドは、eq() または :eq

<li>ページ全体で要素を検索することに加えて、要素を検索する必要がある場合があります。特定の要素内 (

内の特定の位置にある子要素を検索するなど)。現時点では、find() メソッドを eq() または :eq 疑似クラス セレクターと組み合わせて使用​​できます。 たとえば、次の HTML コードがあります:

<div id="container">
  <div class="item">第一项</div>
  <div class="item">第二项</div>
  <div class="item">第三项</div>
</div>

id

が ## である <div>## を検索したい場合#container #要素内の 2 番目の子要素には、次のコードを使用できます: <code><pre class='brush:php;toolbar:false;'>$('#container').find('.item').eq(1)</pre> または: <pre class='brush:php;toolbar:false;'>$('#container .item:eq(1)')</pre> どちらのメソッドも 2 番目の を含む要素を返します。 class

item

の <div> 要素の jQuery オブジェクト。 <code>概要上で述べたように、jQuery を使用して最初の要素を見つけるのは非常に簡単で、eq()

メソッドまたは

を使用するだけです。 :eq

疑似クラスセレクターで十分です。要素内の特定の位置で子要素を検索する必要がある場合は、find() メソッドを組み合わせて使用​​できます。 これらのメソッドを通じて、開発者はページ上の要素の位置を簡単に決定し、要素の動的生成などのタスクを迅速に完了できます。