定義jQuery「eq」

Question

我正在困難的時間圍繞在jQuery eq周圍。有人可以解釋它對我的用途嗎？什麼和如何索引？

謝謝。

Answer 1

有了這個HTML：

<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「），然後從第二個一個並改變其顏色爲紅色。 「

$("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

這聽起來像你可能會被逮住的話「索引」。

在這種情況下，'索引'是指項目集合中的特定項目。因此，eq可讓您訪問一組匹配元素中的單個項目。

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對象。通過在JavaScript Array slice函數上調用Function.apply並將jQuery slice函數的arguments作爲argsArray傳入，獲得構成新jQuery對象的匹配元素的元素。

另一方面，get()命令更直接。讓我們看看源

// 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 ]; 
} 

稱爲而無需爲num參數的自變量，jQuery對象被轉換成一個陣列，利用Function.call在JavaScript的數組slice功能。如果num被定義，則在jQuery對象的相應屬性保持的值被返回，大致相同下面

$([selector]).get(0) 

//is the same as 

$([selector])[0]