如何通過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/