[英]How to create an array of values from LI inside a UL
I have a control which allows users to sort the <li>
in whatever order they want. 我有一个控件,它允许用户以他们想要的任何顺序对<li>
进行排序。 when the form submits I want to grab the text inside the <li>
for each <li>
put into an array, in the order on the form. 当表单提交时,我想按表单上的顺序在每个放入数组的<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>
I am grabbing the <li>
's with: 我用<li>
抓取:
var ar = [];
ar = document.getElementById("sortable").getElementsByTagName("li");
I then go through the array: 然后,我遍历数组:
for(i = 0; i < ar.length; i++){
alert(ar[i].text()); //ar[i].anything results in console errors.
}
ar[i] displays [object HTMLLIElement]
for every <li>
available. ar [i]为每个可用的<li>
显示[object HTMLLIElement]
。 if I try to access the .text/.val/id properties inside the items i get a console error. 如果我尝试访问项目内的.text / .val / id属性,则会收到控制台错误。 So I'm assuming this has to do with a parsing/conversion issue? 所以我假设这与解析/转换问题有关?
How do I properly create an array that looks like protective services,Engineering Services and Public Works
and NOT like [object HTMLLIElement],[object HTMLLIElement]
? 如何正确创建看起来像protective services,Engineering Services and Public Works
而不是[object HTMLLIElement],[object HTMLLIElement]
? Or how do I access my text information from the <li>
as a [object HTMLLIElement]
? 或者如何从<li>
作为[object HTMLLIElement]
访问我的文本信息?
For a pure javascript solution use the innertext property 对于纯JavaScript解决方案,请使用innertext属性
alert(ar[i].innerText);
Fiddle: http://jsfiddle.net/3fjursaw/ 小提琴: http : //jsfiddle.net/3fjursaw/
You need to get the jQuery object in order to use text()
: 您需要获取jQuery对象才能使用text()
:
alert($(ar[i]).text());
You need to use the properties ar[i].innerText
or ar[i].textContent
on DOM nodes. 您需要在DOM节点上使用属性ar[i].innerText
或ar[i].textContent
。 The method .text()
would be used if you had a jQuery object 如果您有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>
the problem is that you work with the HTMLElement, which is of vanilla js, not jQuery. 问题是您使用的是HTMLElement,它是普通js而不是jQuery。 Try .innerHTML
instead of .text()
尝试使用.innerHTML
而不是.text()
jQuery solution: jQuery解决方案:
$('li', '#sortable').each(function(){
alert($(this).text());
});
Or to fix your solution in pure JS: 或使用纯JS修复您的解决方案:
var ar = [];
ar = document.getElementById("sortable").getElementsByTagName("li");
for (i = 0; i < ar.length; i++) {
alert(ar[i].innerText);
}
Use : 采用 :
var ar = [];
var listItems = $("#sortable li");
listItems.each(function(li) {
ar.push($(this).text());
});
Working here: http://jsfiddle.net/csdtesting/0uddfms6/ 在这里工作: http : //jsfiddle.net/csdtesting/0uddfms6/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.