Comment puis-je mettre de la liste non ordonnée d'éléments dans un tableau

Mon code est...

Comment puis-je obtenir le texte de chaque élément de la liste dans un tableau à l'aide de javascript natif?

<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>

Merci beaucoup.

OriginalL'auteur | 2010-05-08

  1. 4

    Sauf si vous souhaitez que le texte-nœuds entre chaque <li> ce n'est pas une bonne idée d'utiliser childNodes. Quel est le problème avec 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;
}
    les meilleurs à ce jour, bien que des listes imbriquées serait un problème si tout existait, comme getElementsByTagName est naturellement hiérarchique. Pourquoi ne pas simplement map(listItems, getText), si?
    changé à map(listItems, getText). Merci!

    OriginalL'auteur James

  2. 1

    Essayez ceci:

    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);
}
    Quel est le problème avec getElementsByTagName('li')?
    childNodes contient des espaces nœuds de Texte, pour lequel innerHTML n'est pas défini. innerHTML sera de retour les caractères échappés du texte.

    OriginalL'auteur nickf

  3. 1

    Juste au sujet de tout Bibliothèque Javascript (Prototype, jQuery, Fermeture, ...) rendra plus facile, mais si vous voulez le faire vous-même:

    Vous êtes proche de votre Javascript doit ressembler à quelque chose comme ceci:

    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
}

    Explication:

    • Avant d'utiliser document.getElementById, vous devez être sûr que le DOM est prêt pour vous de le faire. C'est certainement prêt à onload temps, et il existe plusieurs mécanismes de déclenchement de votre code un peu plus tôt que cela, si vous le souhaitez (y compris de mettre le script à la fin).
    • La boucle commence par se faire la ul#list élément du premier enfant, puis se poursuit tant qu'il y a d'autres frères et sœurs.
    • Dans la boucle, nous vérifions que chaque nœud est un Élément (nodeType == 1) et que son nom de la balise est "LI".
    • Si elle l'est, nous avons récupérer son code HTML et de le pousser sur le tableau.

    J'ai utilisé innerHTML pour récupérer le contenu de la LIs parce que c'est largement pris en charge. Alternativement, vous pouvez utiliser innerText sur IE (et quelques autres) et textContent sur Firefox, mais attention, ils ne le font pas assez la même chose (textContent sur Firefox inclure le contenu de script balises, par exemple, qui n'est probablement pas ce que vous voulez).

    Quel est le problème avec getElementsByTagName('li')?
    C'est certainement une option, c'est une boucle de toute façon, à l'aide de getElementsByTagName a besoin d'un second appel de la fonction et de la création d'une NodeList, qui semble unnecesary si vous allez à la boucle de toute façon. (Est-ce que votre downvote? Si si, semble un peu dur, juste pour aller d'une manière différente...)

    OriginalL'auteur T.J. Crowder

  4. 1
    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);
}

    Et comme toujours, la manière la plus simple à l'aide de jQuery:

    var list = $('#list li').map(function(){ return $(this).text(); });
    childNodes contient des espaces nœuds de Texte qui sont non désirés dans la liste (et pour qui innerText n'est pas défini). || test échoue pour vide-chaîne innerText, laissant à-dire à mettre undefined dans la gamme.
    Avec jQuery même de plus simple: var list = $('#list li').map(function(){return $.text([this])});

    OriginalL'auteur Vincent Robert

  5. 0

    var liste = document.getElementsByTagName('ul')[0].getElementsByTagName('li');

    var theArray = [];

for (var i = 0; i < list.length; i++) {
    var arrValue = list[i].innerHTML;
    console.log(arrValue);
    theArray.push(arrValue);
}
    nickf réponse essentiellement, mais à l'aide de getElementsByTagName au lieu d'utiliser childnodes

    OriginalL'auteur pixel 67