如何通过UL内部的LI创建值数组

Question

我有一个控件，它允许用户以他们想要的任何顺序对<li>进行排序。 当表单提交时，我想按表单上的顺序在每个放入数组的<li>获取<li>的文本。

<ul id="sortable">
    <li class="ui-state-default">
        <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Protective Services
    </li>
    <li class="ui-state-default">
        <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Engineering Services and Public Works
    </li>
</ul>

我用<li>抓取：

var ar = [];
ar = document.getElementById("sortable").getElementsByTagName("li");

然后，我遍历数组：

for(i = 0; i < ar.length; i++){
    alert(ar[i].text());    //ar[i].anything results in console errors.
}

ar [i]为每个可用的<li>显示[object HTMLLIElement] 。 如果我尝试访问项目内的.text / .val / id属性，则会收到控制台错误。 所以我假设这与解析/转换问题有关？

如何正确创建看起来像protective services,Engineering Services and Public Works而不是[object HTMLLIElement],[object HTMLLIElement] ？ 或者如何从<li>作为[object HTMLLIElement]访问我的文本信息？

Answer 1

对于纯JavaScript解决方案，请使用innertext属性

alert(ar[i].innerText);

小提琴： http : //jsfiddle.net/3fjursaw/

Answer 2

您需要获取jQuery对象才能使用text() ：

alert($(ar[i]).text());

JSFIDDLE： http : //jsfiddle.net/rh6ufn23/1/ 。

Answer 3

您需要在DOM节点上使用属性ar[i].innerText或ar[i].textContent 。 如果您有jQuery对象，则将使用.text()方法

 var lis = document.getElementById("sortable").getElementsByTagName("li"); var data = []; for(var i=0; i<lis.length; i++){ data.push(lis[i].innerText); } var jsonFormated = JSON.stringify(data); document.getElementById("log").innerHTML = jsonFormated; 

 <ul id="sortable"> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-ns"></span>Protective Services</li> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-ns"></span>Engineering Services and Public Works</li> </ul> <div id="log"></div> 

Answer 4

问题是您使用的是HTMLElement，它是普通js而不是jQuery。 尝试使用.innerHTML而不是.text()

Answer 5

jQuery解决方案：

$('li', '#sortable').each(function(){
    alert($(this).text()); 
});

或使用纯JS修复您的解决方案：

var ar = [];
ar = document.getElementById("sortable").getElementsByTagName("li");

for (i = 0; i < ar.length; i++) {
    alert(ar[i].innerText);
}

见小提琴 。

Answer 6

采用 ：

var ar = [];
var listItems = $("#sortable li");
listItems.each(function(li) {
    ar.push($(this).text());
});

在这里工作： http : //jsfiddle.net/csdtesting/0uddfms6/