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

WBOY
リリース: 2023-05-25 10:04:37
オリジナル
1161 人が閲覧しました

フロントエンド開発者は、特に要素が動的に生成される場合、ページ上で要素が配置される順序を見つける必要があることがよくあります。このとき、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() メソッドと似ていますが、メソッドを呼び出す必要はありません。 <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>

eq()

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

<li>

要素を検索できます: <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 番目の

< を含む要素を返します。 li>

要素の 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 番目の子要素には、次のコードを使用できます: <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()

メソッドまたは

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

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

以上がjqueryは最初の要素を見つけますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート