jQuery:eq()とget()


98

私はjQueryを初めて使用するので、jQuery get()eq()関数の違いは何だろうと思います。私はget()関数が何をしているのか誤解するかもしれませんが、同じ行の返された要素で返された関数を呼び出せないのは奇妙だと思いました。

//Doesn't work
I.e.  $("h2").get(0).fadeIn("slow");

//Works
$("h2").eq(0).fadeIn("slow");


回答:


194

.get()そして.eq()、両方のリターンjQueryオブジェクトの配列から単一の「要素」が、それらは異なった形で単一の要素を返します。

.eq() jQueryオブジェクトとして返します。つまり、DOM要素はjQueryラッパーでラップされます。つまり、jQuery関数を受け入れます。

.get()生のDOM要素の配列を返します。生のDOM要素の場合と同じように、属性にアクセスしてその機能を呼び出すことにより、それぞれを操作できます。しかし、jQueryでラップされたオブジェクトとしてのアイデンティティを失うため、jQuery関数は機能し.fadeInません。


8
.get()は配列を返し、.get(index)は配列のインデックスにある単一の要素を返します。
Mohamed Fasil 2014

16

get()はDOM要素:eq()eq()返し、とjQuery要素を返します。DOM要素にはメソッドがないためfadeIn()失敗します

http://api.jquery.com/get/

説明: jQueryオブジェクトに一致するDOM要素を取得します。

http://api.jquery.com/eq-selector/

説明:一致するセット内のインデックスnの要素を選択します。


12

get(0)(ドキュメント) セット内の最初のDOM要素を返します。

eq(0)(ドキュメント) jQueryオブジェクトにラップされた、セット内の最初のDOM要素を返します。

そのため、実行.fadeIn("slow");しても機能しません.get(0)。DOM要素にはfadeIn()メソッドはありませんが、jQueryオブジェクトにはあります。


6

他の答えを基にするには:

$('h2').get(0) === $('h2').eq(0)[0]  //true
$( $('h2').get(0) ) === $('h2').eq(0)  //true

1
最初は正しいです。2つ目は違います。これら2つのオブジェクトは同じではありません
Royi Namir

5

eq(i)レシーバーのセットのi番目のメンバーをjQueryオブジェクトとして取得し、i番目のメンバーをget(i)DOM要素として返します。

これが機能しない理由:

$("h2").get(0).fadeIn("slow");

h2DOM要素に呼び出されるメソッドがないためですfadeInです。

eq(0)代わりにここを使用してください。


0

ここでは、他の人からのポイントを説明する例を挙げています。次のコードを検討してください

<div id="example">
    Some text
    <div>Another div</div>
    <!--A comment-->
</div>

そして対応するjsコード、

$(document).ready(function() {
    var div = $("#example").get(0);
    console.log(typeof(div));
    console.log(div);
    console.log("XXXXXXXXX");
    var div_eq=$('#example').eq(0);
    console.log(typeof(div_eq));
    console.log(div_eq);
    });

これはあなたが見るものです

 object
excercise1.js (line 5)
<div id="example">
excercise1.js (line 6)
XXXXXXXXX
excercise1.js (line 7)
object
excercise1.js (line 9)
Object[div#example]

最初はDOMオブジェクトですが、後者はJqueryメソッドを呼び出すことができるJqueryラップオブジェクトです。


0

jQuery eq()メソッドは、特定のインデックス番号を持つHTML要素を選択します。

これがその例です

<body>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</body>

$( "body" ).find( "div" ).eq( 2 ).addClass( "red" );
// it finds the second div in the html body and change it to red color.

ソース:http : //www.snoopcode.com/JQuery/jquery-eq-selector


「2番目のdivが見つかりました」=> eq(2)3番目のdivが返されませんか?
xhienne

0

上記の回答は具体的かつ正確に説明しています。ここで、の使用に役立つ可能性があるいくつかのポイントを追加しますget()

  1. に引数を渡さない場合.get()、DOM要素の配列が返されます。

  2. あなたが使用してDOMオブジェクトを得た場合get()のように、 var s = $("#id").get(0) あなたは、単にこれを使って、バックjQueryオブジェクトにそれを回すことができ、$(s)

  3. を使用$obj[i]したくない場合は、代替方法として使用できます。$obj.get(i)以下を参照してください。

    var $obj = $("#ul li");
    var obj1 = $obj.get(1);
    var obj2 = $obj[1];
    
    //true
    return obj2===obj1;
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.