Return arrays in Javascript

Question

I'm using the Dragsort plugin and we want to tag IDs in an array and print them.

My Html Code Is:

<ul id="list1">
    <li class="ss"><div>1</div></li>
    <li><div>2</div></li>
    <li><div>3</div></li>
    <li><div>4</div></li>
    <li><div>5</div></li>
    <li><div>6</div></li>
    <li><div>7</div></li>
    <li><div>8</div></li>
    <li><div>9</div></li>
</ul>
<p id="demo"></p>

and my jQyery codes is

$("#list1, #list2").dragsort({ dragSelector: "div", dragBetween: true, dragEnd: saveOrder, placeHolderTemplate: "<li class='placeHolder'><div></div></li>" });

function saveOrder() {
    var data = $("#list1 li").map(function() { return $(this).children().html(); }).get();
    $("input[name=list1SortOrder]").val(data.join("|"));
};

$( "#list1 li" ).each(function( index ) {
    let items = [];
    items = [ index + 1];
    console.log(items.map(() => index));
    $(this).attr("id",items);
});

$('#hamid').click(function () {
    $( "#list1 li" ).each(function() {
        its = [ $(this).attr('id')];
    });
});

When I want to return id <li> return last of them

Answer 1

You may want to change the line

its = [ $(this).attr('id')];
//this will only create an instance of an array with one element.

change the last function to something like:

$('#hamid').click(function () {
    var ids = [];
    $( "#list1 li" ).each(function() {
        ids.push( $(this).attr('id') );
    });
    console.log(ids);  
    // this will print an array with all ids inside
    // then you can return it or do whatever you want with it
});

Answer 2

I guess your issue is that you want to get all the IDs of the elements that matches #list1 li, as seen in the last 5 lines of your code. The reason why it is not working is because you are reassigning a brand new array to the its variable. I suggest doing one of the two:

• Solution 1: Push into the array instead of reassigning it
• Solution 2: Use .map() + .get() to return an array of all IDs

---

Solution 1 (basic)

Use Array.prototype.push() to append IDs to a pre-existing array. Remember that instead of converting this into a jQuery object and then accessing its ID via the .attr() method (by doing $(this).attr('id')), you can easily do this.id:

$('#hamid').click(function () {
    var its = [];
    $('#list1 li').each(function() {
        its.push(this.id);
    });
    console.log(its);
});

---

Solution 2 (better)

Use a combination of .map() and .get(). This is the most jQuery-way to do it:

$('#hamid').click(function () {
    var its = $('#list1 li').map(function() {
        return this.id;
    }).get();
    console.log(its);
});

The reason why .get() is needed is because .map() returns a jQuery collection instead of an actual array. To retrieve the array itself, you will need to append .get() after .map().