n番目のjQuery要素を取得する方法


311

jQueryでは$("...").get(3)、3番目のDOM要素を返します。3番目のjQuery要素を返す関数は何ですか?

回答:


310

(短い)セレクターページを最初に参照しませんか?

ここにある::eq()演算子。と同じようget()に使用されますが、jQueryオブジェクトを返します。

または、.eq()関数も使用できます。


23
.eq()代わりになるはずではありません:eq()か?
RubenGeert 2014

15
はい、.eq()OPの質問にはより適切です。:eq()文字列パラメータ内で使用されている$一方、.eq()既存のjQueryオブジェクトのメソッドです。
mjswensen 14

55
私は行く必要があり、これを毎回調べなければならないことを誓います。シングル時間
ivarni 14年

3
@JoelWorsham望ましい動作に依存します。$('select').find('option').eq(n)基本的にグループ化を無視し、全体としてすべてのオプションを取得します。あなたはグループごとにそれをしたい場合は、このようなものが必要です:$('select').find('optgroup').each(function() { $(this).find('option').eq(n)...; })
Dykam

4
「なぜ(短い)セレクターページを最初に参照しないのですか?」- 「EQは」非常に悪い名前で、私のために当量の比較を意味する、私は定期的にちょうど....それを飛ばしているので
mmlac

309

たとえば、:eqセレクターを使用できます。

$("td:eq(2)").css("color", "red"); // gets the third td element

またはeq(int)関数:

$("td").eq(2).css("color", "red");

また、インデックスはゼロから始まることに注意してください。


7
同義語として、あなたも使用できる:nth()セレクターを-と混同してはならない:nth-child()
user123444555621

より良い答えであり、事実の3年後に編集されていません:)
Andrew

セレクター/関数の使用方法を実際に説明していただきありがとうございます
Joseph Rogers

49

jQueryオブジェクトを構築するクエリを制御できる場合は、 :eq()

$("div:eq(2)")

それを制御できない場合(たとえば、別の関数または何かから渡されている場合)、次を使用します。 .eq()

var $thirdElement = $jqObj.eq(2);

または、それらのセクション(たとえば、3番目、4番目、5番目の要素)が必要な場合は、 .slice()

var $third4th5thElements = $jqObj.slice(2, 5);

スライスを探していましたが、検索方法がわかりませんでした。元の質問で必要なものを超えていただきありがとうございます。
Samik R 2013

4
この答えに出くわした人にとって、注目すべき点は、n番目の子セレクターが1ベースであるのに対して、:eqまたは.eq()は0ベースであるということです
Sudhanshu Mishra 2013

1
実際には使用し.eq()ないでください:eq()。わずかなパフォーマンスの向上。
Qwerty 2014

13

これは使えると思います

$("ul li:nth-child(2)").append("<span> - 2nd!</span>");

一致した各ulで2番目のliを見つけ、それをメモします。


11

.eq()-要素の0ベースの位置を示す整数。

例:

その上に単純なリストがあるページを考えてみましょう:

<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
</ul>

このメソッドを一連のリスト項目に適用できます。

$( "li" ).eq( 2 ).css( "background-color", "red" );

詳細:.eq()


3

変数にjqueryオブジェクトが既にある場合は、jqueryを使用せずに、通常のインデックス付き配列として扱うこともできます。

var all_rows = $("tr");
for(var i=0; i < all_rows.length; i++){
   var row = all_rows[i];
   //additionally, you can use it again in a jquery selector
   $(row).css("background-color","black");
}

上記の例はまったく役に立ちませんが、jqueryによって作成されたオブジェクトをインデックス付き配列として処理する方法を表しています。


右、そしてもう1つ(うまくいけば役立つ)ヒント:行に<select>要素のリストが含まれていて、選択したコンボボックス要素が必要な場合は、$(row).val();
Matt

2

私があなたの質問を正しく理解していれば、いつでもget関数を次のようにラップできます:

var $someJqueryEl = $($('.myJqueryEls').get(3));

3
これは単なる「難しい方法」であり、これがeq()無料で提供されるものです。
Caumons

1

たとえば、ループ内の特定の要素/ノードまたはタグをフェッチする場合

<p class="weekday" data-today="monday">Monday</p>
<p class="weekday" data-today="tuesday">Tuesday</p>
<p class="weekday" data-today="wednesday">Wednesday</p>
<p class="weekday" data-today="thursday">Thursday</p>

したがって、上記のコードループが実行され、特定のフィールドを選択する必要があります。そのためには、上記のループから期待される要素のみを選択できるjQuery選択を使用する必要があるため、コードは次のようになります。

$('.weekdays:eq(n)');

例えば

$('.weekdays:eq(0)');

他の方法による

$('.weekday').find('p').first('.weekdays').next()/last()/prev();

ただし、最初の方法は、HTML <tag>クラス名が一意の場合により効率的です。

注:2番目のメソッドは、ターゲット要素またはノードにクラス名がない場合に使用されます。

詳細についてはhttps://api.jquery.com/eq/に従ってください


0

ただし、セレクターを使用した反復では意味がありません。

var some = $( '...' );

for( i = some.length -1; i>=0; --i )
{
   // Have to transform in a jquery object again:
   //
   var item = $( some[ i ] );

   // use item at will
   // ...
}

0

jQueryを使用してN番目の要素にアクセスして削除するライブ例:

<html>
<head></head>
<body>
    <script type="text/javascript" 
    src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
        $('li:eq(1)').hide();
      });
    </script>
    <ol>
      <li>First</li>
      <li>Second</li>
      <li>Third</li>
    </ol>
</body>
</html>

実行すると、順序付けられたリストに2つの項目、FirstとThirdが表示されます。2番目は隠されました。


PS:カウントは0から始まります。最初のインデックス0で、第2は、....ようにインデックス1であるとされている
KNU

0
 $(function(){
            $(document).find('div').siblings().each(function(){
                var obj = $(this);
                obj.find('div').each(function(){
                    var obj1 = $(this);
                    if(!obj1.children().length > 0){
                        alert(obj1.html());
                    }
                });

            });
        });

<div id="2">
    <div>
        <div>
            <div>XYZ Pvt. Ltd.</div>
        </div>
    </div>
</div>
<div id="3">
    <div>
        <div>
            <div>ABC Pvt Ltd.</div>
        </div>
    </div>
</div>

"$(function(){"最初の秋に、自動で起動する匿名関数を作成しました。その中で、兄弟を使用して3つの親divを見つけました。次に、3つすべての親divで繰り返し、すべての子の長さをチェックします。親divの最後のdivであるかどうかをどのように識別できるか。3つのメインの親divごとに最後のdiv htmlに警告する
Sanjay Verma

コメントで情報を提供する代わりに、回答を編集できます:)
T3 H40
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.