javascript - jquery(selector).each 函数

Question

我正在使用 Gridster用于网页。Gridster 小部件是 <li>放置在 <ul> 中的元素.我在 json 的帮助下生成这些小部件。

我将 json 的值传递给 add_widget动态生成 widgets(li elements) 的 gridster 函数对我来说。

gridster 有一个内置函数 serialize它生成一个 json 编码存在的小部件。

我修改了seriazlize返回一个额外的函数键值对，可以捕获小部件上文本区域的内容。

以下是帮助获取额外键值对的函数

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);

}

在上面的函数中，我得到类为 gridster 的元素在里面选择<ul>被选中，其中每个 <li>被选中。

但我不明白什么是 .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>

Fiddle代表相同

Answer 1

But I was not understanding what is .each((idx, el) => { this part

$('.gridster ul li').each((idx, el) => { 是一个箭头函数。idx 和 el 是处理函数接收的参数(有关更多信息，请参阅 jQuery docs)。

箭头函数等同于:

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

但是有一些注意事项。首先，函数处理程序在使用箭头函数定义时保留外部作用域，因此 this 将引用 serialize() 函数本身，而不是 li 被迭代。其次，它在 IE 中完全不受支持。

Also what this line entirely s[idx].images = $('.imagenames', el).val();

该行将 s 数组中索引为 idx 的对象的 images 属性的值设置为 .imagenames 在 el 元素中输入。