jquery(selector).each function

Question

I am using Gridster for webpage.The gridster widgets are <li> elements placed in <ul>.I generating these widgets with the help of json.

I am passing the values of json to add_widget function of gridster which dynamically generates the widgets(li elements) for me.

The gridster has a builtin function serialize which generates a json encoding the widgets present.

I have modified the seriazlize function to return an extra key value pair which can capture the content of textarea on the widgets.

Following is the function which helps in getting the extra key value pair

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

}

In the above function I am getting that element with class gridster is selected inside that <ul> is selected and in that each <li> is selected.

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

Also what is idx and el and this line entirely 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 representing the same

`s` is an array of items, `idx` is the index of the items you are looping (or `each`-ing) over, and `el` is the actual element being looped. `(idx, el)` are the arguments of an arrow function, with the arrow linked the arguments and the actual executable function body. So `.each((idx, el) => { ...execute stuff with arguments... })` is equal to, say, `.each(function( idx, el ){ ... execute stuff with arguments... })` — somethinghere, Apr 05 '18 at 09:55
NewBie, Type: Function( Integer index, Element element ) This is from https://api.jquery.com/each/ — Răducanu Ionuţ, Apr 05 '18 at 09:56

score 2 · Accepted Answer · answered Apr 05 '18 at 09:55

2

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

$('.gridster ul li').each((idx, el) => { is an arrow function. idx and el are the arguments that the handler function receives (see the jQuery docs for more information on that).

The arrow function is equivalent to this:

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

However there are a couple of caveats. Firstly the function handler retains the outer scope when using an arrow function definition, so this would refer to the serialize() function itself, not the li being iterated over. Secondly, it's completely unsupported in IE.

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

That line is setting the value of the images property of the object at index idx within the s array to the value of the .imagenames input within the el element.

answered Apr 05 '18 at 09:55

Rory McCrossan

331,213
40
305
339

Can you please explain the first caveat I was not getting it – NewBie Apr 05 '18 at 10:05
Hopefully this demo should show it more clearly: https://jsfiddle.net/RoryMcCrossan/wLpxp9kt/ – Rory McCrossan Apr 05 '18 at 10:08
My understanding of this is `$('.imagenames', el).val();` .Search an element with class image names in the element `el` and get its value with `val();` and assign it to key images. Is that correct – NewBie Apr 05 '18 at 10:24
I may have just put it in a different way what you have said sorry for it then.All this is bit difficult for me to grasp at this pace – NewBie Apr 05 '18 at 10:24
1

Your understanding is correct. No need to apologise at all :) – Rory McCrossan Apr 05 '18 at 10:27
Thanks for understanding :) – NewBie Apr 05 '18 at 10:29

score 1 · Answer 2 · answered Apr 05 '18 at 09:55

1

.each((idx, el) => { is a forEach loop over every element of the array coming from $('.gridster ul li'). el represents the object and idx is the index of the element in that array.

answered Apr 05 '18 at 09:55

SBylemans

1,764
13
28

score 1 · Answer 3 · answered Apr 05 '18 at 09:57

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

That's passing an arrow function into jQuery's each. each will call the function for each entry in the jQuery set it's called on (in that case, the one created by $('.gridster ul li')).

Also what is idx and el

When each calls the function, it passes the index of the element in the set as the first argument, and the element itself as the second argument. So idx is the index in the set, and el is the element.

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

That's looking up the object in s for index idx and creating/updating an images property on the object, assigning it the value of the first descendant element within el that has the class imagenames. See here and here in the jQuery documentation.

jquery(selector).each function

3 Answers3