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

The question is not clear. What is the problem you are facing? — Ahmad
– Ahmad, Commented Nov 14, 2018 at 10:09
problem is when i want to return all ids in "its" variable , it return just last id — Arman Bagheri
– Arman Bagheri, Commented Nov 14, 2018 at 10:11
You're reassigning its with a new array when iterating through the whole collection of #list1 li. Just use .map() to return the array of IDs in all the <li> elements in the click handler. — Terry
– Terry, Commented Nov 14, 2018 at 10:13
@arman Sure. See my answer: there are two ways to do it: a basic way, and a truly jQuery way :) — Terry
– Terry, Commented Nov 14, 2018 at 10:19

Ahmad · Accepted Answer · 2018-11-14 10:17:10Z

3

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

edited Nov 14, 2018 at 10:17

answered Nov 14, 2018 at 10:15

Ahmad

12.8k7 gold badges53 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Terry · Accepted Answer · 2018-11-14 10:17:17Z

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().

Collectives™ on Stack Overflow

Return arrays in Javascript

2 Answers 2

Comments

Solution 1 (basic)

Solution 2 (better)

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Solution 1 (basic)

Solution 2 (better)

Comments

Your Answer

Sign up or log in

Post as a guest

Related