javascript - jquery(选择器).each 函数

Question

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

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

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 元素中输入。