Comment parcourir la liste ul en utilisant Javascript?

J'ai la page HTML suivante (page est simplifiée ici que c'est un échantillon de la vrai):

<html>
<head>
<script type="text/javascript" src="JavaScript/Painting.js"></script>
</head>
<body>
<div id="center-wrapper">
    <div id="side-menu">
        <ul>
            <li><a onclick="Paint()">About</a></li>
            <li><a onclick="Paint()">Contents</a></li>
            <li><a onclick="Paint()">Visual</a></li>
            <li><a onclick="Paint()">CSS</a></li>
            <li><a onclick="Paint()">Javascript</a></li>
        </ul>
    </div>
</div>
</body>
</html>

Et j'ai l'Painting.js fichier (à nouveau, un peu simplifiée):

function Paint()
{

    var e = window.event;

    var sender;
    if (e.target)
    {
        sender = e.target;
    }   
    else
    {
        if (e.srcElement)
        {
            sender = e.srcElement;
        }
    }

    for (element in sender.parentNode.parentNode.getElementsByTagName("a"))
    {
        element.style.color = 'blue';
        element.style.backgroundColor = '#FFFFFF';
    }

    sender.style.color = '#FFFFFF';
    sender.style.backgroundColor = '#000000';

}

L'idée de base est:

  1. Trouver un élément HTML qui a provoqué l'événement.
  2. Aller jusqu'à ce que vous atteignez le <ul> élément.
  3. Boucle à travers les éléments de la liste; trouver la <a> de balises et de changer leur couleur et l'arrière-plan
  4. À la sortie de la boucle, changer la couleur et l'arrière-plan de l'élément HTML qui a provoqué l'événement.

Maintenant, je n'arrive pas à obtenir de la partie située dans la boucle for. Je pense que je fais une erreur en appelant GetElementsByTagName() la méthode. Pourriez-vous m'aider? Merci.

source d'informationauteur Boris

  1. 12

    Vous devriez appeler getElementsByTagName() qu'une seule fois, la mise en cache du résultat.

    Parcourir la collection comme ceci (au lieu d'utiliser for/in).

    var a_elements = sender.parentNode.parentNode.getElementsByTagName("a");

for (var i = 0, len = a_elements.length; i < len; i++ ) {
    a_elements[ i ].style.color = 'blue';
    a_elements[ i ].style.backgroundColor = '#FFFFFF';
}
sender.style.color = '#FFFFFF';
sender.style.backgroundColor = '#000000';

    Pour obtenir l'objectif, vous pouvez le passer en tant que paramètre dans la ligne onclick:

       <ul>
        <li><a onclick="Paint(this)">About</a></li>
        <li><a onclick="Paint(this)">Contents</a></li>
        <li><a onclick="Paint(this)">Visual</a></li>
        <li><a onclick="Paint(this)">CSS</a></li>
        <li><a onclick="Paint(this)">Javascript</a></li>
    </ul>

    Alors votre javascript peut ressembler à ceci:

    function Paint( sender ) {

    var a_elements = sender.parentNode.parentNode.getElementsByTagName("a");

    for (var i = 0, len = a_elements.length; i < len; i++ ) {
        a_elements[ i ].style.color = 'blue';
        a_elements[ i ].style.backgroundColor = '#FFFFFF';
    }
    sender.style.color = '#FFFFFF';
    sender.style.backgroundColor = '#000000';
}

    Exemple: http://jsbin.com/aroda3/

  2. 3

    En gros:

    1. Afin de trouver l'élément qui a provoqué l'événement, vous devez ajouter un identificateur de la un ou li élément, puis l'utiliser comme un paramètre à la fonction. Par exemple:

      <li id='id_li1'><a onclick="Paint(id_li1)">About</a></li>

    2. Vous pouvez également utiliser le ul id en tant que paramètre de la fonction, de sorte que vous pouvez savoir qui est l'ul que vous avez besoin. Je suppose que vous générez votre ul dinamically:

      <a onclick="Paint(id_li1, id_ul)">About</a>

    3. Ensuite, vous avez la référence de l'ul et vous pouvez implémenter une fonction pour effectuer une itération sur les éléments de la liste et de donner à la fonction que le ul nœud à l'aide de la id_ul. Par exemple:

      function processUL(ul) {
    if (!ul.childNodes || ul.childNodes.length == 0) return;

    //Iterate LIs
    for (var itemi=0;itemi<ul.childNodes.length;itemi++) {
        var item = ul.childNodes[itemi];
        if (item.nodeName == "LI") {
            //Iterate things in this LI in the case that you need it put your code here to get the a element and change the color and background
            .....
        }
    }
}
  3. 1

    Je sais que vous ne pouvez pas utiliser jQuery pour cela, mais j'ai pensé que je voudrais vous offre une solution pour les autres qui peuvent être en mesure de:

    $(function(){
    $("li a").click(function(){
        $(this).parent().siblings().each(function(){
            $(this).find("a").css({'color':'blue','background-color':'white'});    
        });
        $(this).css({'color':'white','background-color':'black'});    
        return false;
    });
});
  4. -4

    Pas. Obtenir des liens par getElementsByTagName("a") est votre web-développeur de la solution.

    Vous pouvez également parcourir le DOM correctement par childNodes, et cette solution est généralisée à toutes les listes UL:

    _($("#my-list")[0].childNodes).filter(function(node) { return node.nodeName == "LI"; })

    Il utilise un trait de soulignement et jQuery.