jQuery（選擇器）。每個函數

Question

我正在將Gridster用於網頁.gridster小部件是放置在<ul>中的<li>元素。我借助json生成了這些小部件。

我將json的值傳遞給add_widget函數，該函數為我動態生成widgets(li elements) 。

Gridster具有一個內置的序列化功能，該功能生成一個json編碼的當前小部件。

我修改了seriazlize函數，以返回一個額外的鍵值對，該鍵值對可以捕獲小部件上textarea的內容。

以下是有助於獲取額外鍵值對的功能

function serialize() {
    var s = gridster.serialize();
    $('.gridster ul li').each((idx, el) => { // grab the grid elements
        s[idx].images= $('.imagenames', el).val(); // extract content from textarea with class:imagenames
        s[idx].title = $('.hoverinformation', el).val();  // extract content from textarea with class:hoverinformation

              json_variable = JSON.stringify(s)
    });
    $('#log').val(json_variable);

}

在上面的函數中，我正在選擇<ul>且選擇了每個<li>情況下，選擇了具有gridster類的元素。

但是我不明白什么是.each((idx, el) => {

還有什么是idx和el ，這一行完全是s[idx].images= $('.imagenames', el).val(); 。

HTML：

<div class="gridster">
<!--  <li> from JSON are placed here -->
    <ul>

    </ul>
     <button class="js-seralize btn btn-success mr-2"> Serialize </button>
     <textarea class="textarea form-control" id="log"></textarea>
</div>

小提琴代表相同

Answer 1

但是我不明白什么是.each((idx, el) => {

$('.gridster ul li').each((idx, el) => {是一個箭頭函數idx和el是處理函數接收的參數（有關此信息，請參閱jQuery文檔 ）。

箭頭功能等效於此：

$('.gridster ul li').each(function(idx, el) { ...

但是，有一些警告。 首先，當使用箭頭函數定義時，函數處理程序保留外部作用域，因此this將引用serialize()函數本身，而不是迭代li 。 其次，IE完全不支持它。

同樣這行完全是s[idx].images = $('.imagenames', el).val();

該行將s數組中索引idx處的對象的images屬性的值設置為el元素中輸入的.imagenames的值。

Answer 2

.each((idx, el) => {是一個forEach在陣列從未來的每一個元素環$('.gridster ul li') el表示對象和idx是陣列中的元素的索引。

Answer 3

但是我不明白什么是.each((idx, el) => {

那是將箭頭函數傳遞給jQuery的each 。 each函數都會為被調用的jQuery集合中的每個條目調用函數（在這種情況下，是由$('.gridster ul li')創建的$('.gridster ul li') ）。

還有什么是idx和el

當each函數調用該函數時，它會將集合中元素的索引作為第一個參數傳遞，並將元素本身作為第二個參數傳遞。 因此， idx是集合中的索引，而el是元素。

這行完全是s[idx].images= $('.imagenames', el).val(); 。

那就是在s查找對象以獲取索引idx並在該對象上創建/更新images屬性，為其分配el中具有imagenames類的第一個后代元素的值。 參見jQuery文檔中的此處和此處 。