Как помещать неупорядоченные элементы списка в массив

Question

Мой код ...

Как получить текст в каждом элементе списка в массив с использованием собственного javascript?

<ul id="list"> 
    <li>List Item 1</li> 
    <li>List Item 2</li> 
    <li>List Item 3</li> 
    <li>List Item 4</li> 
</ul> 

<script type="text/javascript"> 
var list = document.getElementById('list').childNodes.TextNode; 
for(var i=0;i < list.length; i++) { 
    var arrValue = list[i]; 
    alert(arrValue); 
} 
</script> 

Большое спасибо.

Answer 1

Если вы не хотите, чтобы текстовые узлы находились между каждым <li>, это не рекомендуется использовать childNodes. Что случилось с getElementsByTagName('li')?

var listItems = document.getElementById('list').getElementsByTagName('li'), 

    myArray = map(listItems, getText); 

function map(arrayLike, fn) { 
    var ret = [], i = -1, len = arrayLike.length; 
    while (++i < len) ret[i] = fn(arrayLike[i]); 
    return ret; 
} 

function getText(node) { 
    if (node.nodeType === 3) return node.data; 
    var txt = ''; 
    if (node = node.firstChild) do { 
     txt += getText(node); 
    } while (node = node.nextSibling); 
    return txt; 
} 

Answer 2

Попробуйте это:

var list = document.getElementById('list').childNodes; 
var theArray = []; 
for(var i=0;i < list.length; i++) { 
    var arrValue = list[i].innerHTML; 
    alert(arrValue); 
    theArray.push(arrValue); 
} 

Answer 3

var LIs = document.getElementById('list').childNodes; 
var list = []; 
for(var i = 0; i < LIs.length; ++i) 
{ 
    var LI = LIs[i]; 
    list.push(LI.innerText || LI.textContent); 
} 

И как всегда, простой способ с помощью JQuery:

var list = $('#list li').map(function(){ return $(this).text(); }); 

Answer 4

Просто о любой Javascript library (Prototype, jQuery, Closure ...) будет сделайте это проще, но если вы хотите сделать это сами:

Вы близки, ваш Javascript должен выглядеть следующим образом:

window.onload = onPageLoad; // Or any of several other similar mechanisms 
          // (you could just run it at the bottom of the page) 
function onPageLoad() { 
    var node, list, arrValue; 

    list = []; 
    for (node = document.getElementById('list').firstChild; 
     node; 
     node = node.nextSibling) { 
     if (node.nodeType == 1 && node.tagName == 'LI') { 
      list.push(node.innerHTML); 
     } 
    } 

    // `list` now contains the HTML of each LI element under the `ul#list` element 
} 

Объяснение:

• Перед использованием document.getElementById, вы должны быть уверены в том, что DOM готов для вас, чтобы сделать это. Это определенно готово к onload раз, и есть различные механизмы для запуска вашего кода немного раньше, чем вам нравится (включая установку скрипта в конце).
• Петля начинается с получения первого дочернего элемента элемента ul#list, а затем продолжается до тех пор, пока есть другие братья и сестры.
• В цикле мы проверяем, что каждый узел является элементом (nodeType == 1) и что его имя тега «LI».
• Если это так, мы извлекаем его HTML и нажимаем на массив.

Я использовал innerHTML для получения содержимого LI, потому что он широко поддерживается. В качестве альтернативы вы можете использовать innerText на IE (и некоторые другие) и textContent на Firefox, но будьте осторожны, что они не делают довольно то же самое (textContent на Firefox будет включать в себя содержимое тегов script, например, вероятно, isn это то, что вы хотите).

Answer 5

список вар = document.getElementsByTagName ('уль') [0] .getElementsByTagName ('Li');

var theArray = []; 

for (var i = 0; i < list.length; i++) { 
    var arrValue = list[i].innerHTML; 
    console.log(arrValue); 
    theArray.push(arrValue); 
}