CODEWITHSUNDEEP
javascript
sharataka
sharataka

Reputation: 5132

How do I correct this for loop in javascript?

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>

Upvotes: -1

Views: 72

Answers (3)

Xotic750
Xotic750

Reputation: 23492

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

Upvotes: 0

elclanrs
elclanrs

Reputation: 94121

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"

Upvotes: 0

David G
David G

Reputation: 96835

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

Upvotes: 5

Related Questions