jQuery "eq"を定義する

Question

jQuery eqの周りに頭を包むのに苦労しています。誰かが私にその使い方を説明することはできますか？どのようにインデックスを作成するのですか？

ありがとうございました。このHTMLで

Answer 1

：

<ul> 
    <li>Mario</li> 
    <li>Luigi</li> 
    <li>Princess</li> 
    <li>Toad</li> 
</ul> 

そして、これはJavaScript：

alert($("ul li").eq(0).text()); // Mario 
alert($("ul li").eq(1).text()); // Luigi 
alert($("ul li").eq(2).text()); // Princess 
alert($("ul li").eq(3).text()); // Toad 

Answer 2

.eq(i)は、指定したインデックスiでコレクションから要素を返します。例では

あなたは投稿のリンクから：

$("p").eq(1).css("color", "red")

それは基本的に言う：「（P "）その後、第二1を取ると、赤にその色を変更する$に一致するすべての要素を検索」。 "

$("p")はすべて文書内の<p>要素に一致します。あなたは今それらのコレクションを持っています。

$("p").eq(1)は、このコレクションを2番目の要素のみに減らします。

.css("color", "red")の部分は、単純にその要素を操作して色を赤に変更します。

Answer 3

は、ドキュメントからの例を見てみましょう：

$("p").eq(1).css("color", "red") 

$("p")    selects all paragraphs in your document 
.eq(1)    selects the second element only 
.css("color", "red") applies css rule to the selected element 

Answer 4

あなたが単語「インデックス」に巻き込まれるかもしれないようですね。

この場合、 'index'はアイテムのコレクション内の特定のアイテムを指します。したがってeqは、一致する要素のセット内の1つのアイテムにアクセスできるようにします。

Answer 5

eq()の仕組みを理解するには、$()がjQueryでどのように機能するかを理解することが役立ちます。あなたは

$([selector],[context]) 

//which is the same as 

$([context]).find([selector]) 

を指定した場合どのような返されることはjQueryのオブジェクト（ラップがを設定するとも呼ば）、他の特性の中で、プロパティは0で始まるおり、それぞれに1ずつ増加でありますセレクタと一致する要素。 A lengthプロパティも設定されています。その理由は、jQueryオブジェクトの一致した要素を配列のように繰り返すことができるからです（forループやeach([callback])などのコマンドを使用）。

eq()

eq: function(i) { 
    return this.slice(i, +i + 1); 
}, 

のソースを見ているのは、今、私たちはeq()はjQueryオブジェクトのslice()コマンドを使用して達成されていることがわかり、それでは、またその

slice: function() { 
    return this.pushStack(Array.prototype.slice.apply(this, arguments), 
    "slice", Array.prototype.slice.call(arguments).join(",")); 
}, 

を見てみましょうしましょう

また、pushStack()を見る必要があります。コマンドはかなり内部的に使用されています

// Take an array of elements and push it onto the stack 
// (returning the new matched element set) 
pushStack: function(elems, name, selector) { 
    // Build a new jQuery matched element set 
    var ret = jQuery(elems); 

    // Add the old object onto the stack (as a reference) 
    ret.prevObject = this; 

    ret.context = this.context; 

    if (name === "find") 
    ret.selector = this.selector + (this.selector ? " " : "") + selector; 
    else if (name) 
    ret.selector = this.selector + "." + name + "(" + selector + ")"; 

    // Return the newly-formed element set 
    return ret; 
}, 

pushStackは配列をとり、新しいjQueryオブジェクトを返すことがわかります。新しいjQueryオブジェクトの一致する要素を構成する要素は、JavaScript配列slice関数のFunction.applyを呼び出し、argsArrayとしてjQueryスライス関数のargumentsを渡すことによって取得されます。

他方、get()コマンドはより簡単です。さんはnumパラメータの引数なしで呼ばれたソース

// Get the Nth element in the matched element set OR 
// Get the whole matched element set as a clean array 
get: function(num) { 
    return num === undefined ? 

    // Return a 'clean' array 
    Array.prototype.slice.call(this) : 

    // Return just the object 
    this[ num ]; 
} 

を見てみましょう、jQueryオブジェクトは、JavaScriptのArray slice機能にFunction.call使用して、配列に変換されます。 numが定義されている場合、jQueryオブジェクトの対応するプロパティに保持された値）は、以下

$([selector]).get(0) 

//is the same as 

$([selector])[0]