How do I correct this for loop in javascript?

Question

I'm trying to create a for loop that will take the value of each of the items in the ul and then create a string from those elements. While $("#sortable li:nth-child(1)").text(); works (replacing 1 with 2,3,4,etc) and brings each item in one at a time, the for statement below pull the entire ul at one time. How do I fix this?

        info = ''
        for (var i =1; i <= 7; i++) {
          value = $("#sortable li:nth-child(i)").text();
          alert(value);
          info = info + ',' + value;
        }
        alert(info);



<ul id="sortable">
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>

David G · Accepted Answer · 2013-04-27 00:45:25Z

5

The parameter is being parsed as a string. You need to stop the string and concatenate the value of i first:

$("#sortable li:nth-child(" + i + ")").text();

answered Apr 27, 2013 at 0:45

David G

97.6k41 gold badges173 silver badges258 bronze badges

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

Comments

elclanrs · Accepted Answer · 2013-04-27 00:52:44Z

0

Try this instead of the loop.

var info = $('#sortable li').slice(0,7).map(function(){
  return $.trim($(this).text());
}).toArray().join(', ');

console.log(info);
//=> "Item 1, Item 2, Item 3, Item 4, Item 5, Item 6, Item 7"

edited Apr 27, 2013 at 0:52

answered Apr 27, 2013 at 0:46

elclanrs

94.2k21 gold badges137 silver badges171 bronze badges

Comments

Xotic750 · Accepted Answer · 2013-04-27 01:38:39Z

Is this what you are trying to achieve? Using element.querySelectorAll

var lis = document.querySelectorAll("li"),
    array = [];

Array.prototype.forEach.call(lis, function (li) {
    array.push(li.textContent);
});

alert(array.join(","));

On jsfiddle

Or instead of using Array.forEach, using Array.map

var lis = document.querySelectorAll("li"),
    array = Array.prototype.map.call(lis, function (li) {
        return li.textContent;
    });

alert(array.join(","));

On jsfiddle

Or same thing using jQuery selectors and jQuery.each

var lis = $("li"),
    array = [];

$.each(lis, function (index, li) {
    array.push($(li).text());
});

alert(array.join(","));

On jsfiddle

Or using jQuery.map

var lis = $("li"),
    array = lis.map(function () {
        return $(this).text();
    }).toArray();

alert(array.join(","));

On jsfiddle

If you specifically wanted to keep it as a for-loop, I'm sure if you wanted to use jquery selectors then you can figure that out from the above examples.

var lis = document.querySelectorAll("li"),
    length = lis.length,
    array = [];

for (i = 0; i < length; i += 1) {
    array.push(lis[i].textContent);
}

alert(array.join(","));

On jsfiddle

Collectives™ on Stack Overflow

How do I correct this for loop in javascript?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related