如何在UL内部从LI创建值数组

Question

我有一个控件，允许用户按照他们想要的顺序对<li>进行排序。当表单提交时，我想按照表单中的顺序抓取放入数组中的每个<li>的{​​{1}}内的文本。

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

ar [i]为每个可用的for(i = 0; i < ar.length; i++){ alert(ar[i].text()); //ar[i].anything results in console errors. } 显示[object HTMLLIElement]。 如果我尝试访问项目中的.text / .val / id属性，我会收到控制台错误。所以我假设这与解析/转换问题有关？

如何正确创建一个看起来像<li>但不像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-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>


<div id="log"></div>

Answer 4

问题是你使用HTMLElement，它是vanilla 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);
}

请参阅fiddle。

Answer 6

使用：

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

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