Question

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

我将json的值传递给gridster的add_widget函数，它为我动态生成widgets(li elements)。

gridster有一个内置函数serialize，它生成一个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);

}

在上面的函数中，我选择了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

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

$('.gridster ul li').each((idx, el) => {是箭头功能。 idx和el是处理程序函数接收的参数（有关详细信息，请参阅jQuery docs）。

箭头功能相当于：

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

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

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

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

Answer 2

.each((idx, el) => {是来自forEach的数组的每个元素的$('.gridster ul li')循环。 el表示对象，idx是该数组中元素的索引。

Answer 3

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

将arrow function传递给jQuery的each。 each将为调用的jQuery集中的每个条目调用该函数（在这种情况下，由$('.gridster ul li')创建的那个）。

同样是idx和el

当each调用该函数时，它将集合中元素的索引作为第一个参数传递，元素本身作为第二个参数传递。因此idx是集合中的索引，el是元素。

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

在s中查找索引为idx的对象，并在对象上创建/更新images属性，为其分配{{1}中第一个后代元素的值}具有类el。请参阅jQuery文档中的here和here。

jquery（selector）.each函数

3 个答案: