Finden Sie ein html-Listenelement-Objekt ordnungsgemäß in javascript für die Anmeldung zu den Veranstaltungen

Ich würde gerne wissen, wie kann ich verweisen auf eine Liste, die Element-Objekt, wenn ich hatte zum Beispiel den folgenden html-Liste 

<div id="subdiv_2">  
 <div id="subdiv_3">  
  <ul>  
   <li><a href="">Item1</a></li>  
   <li><a href="">Item2</a></li>  
   <li><a href="">Item3</a></li>    
  </ul>  
 </div>  
</div>

Wie ist es möglich, registrieren Sie einen onclick auf den Item2 li, ohne es zu müssen, haben eine einzigartige elementId
zB kann ich machen damit subdiv_3, weil es hat eine einzigartige ID und ist nicht in der Liste von 

document.getElementById('subdiv_3').addEventListener('click', function();, false);

Mein Ziel ist letztlich eine Funktion zuweisen zu jeder Liste-Objekt, für die Anzahl der Liste der Objekte mit eindeutigen Parametern, basierend auf der Liste die Objekt-Nummer eg: 

for(i=0;i<list.length;i++){  
 "document.getElementById(list.item"+i+").addEventListener(\'click\',function("+i+");,false);";  
}
InformationsquelleAutor Supernovah | 2008-12-10
  1. 2

    Könnten Sie bekommen alle Kinder Elemente des subdiv_3 sind <li>. Dann Durchlaufen dieser Schleife hinzufügen der Funktionen, wie Sie gehen.

    div = document.getElementById('subdiv_3');
els = div.getElementsByTagName('li');

for (var i=0, len=els.length; i<len; i++) {
    alert(i);  //add your functions here   
}

    Blick auf dein code Beispiel, wenn Sie in der Schleife erstellen Ihrer Funktionen können Sie mit einer Schließung scoping Probleme. (Alle Funktionen werden angezeigt, um den gleichen Wert von i ist.) Schauen Sie sich meine Antwort auf diese Frage, das problem zu beheben: Wie zum Hinzufügen von Event-Handler mit Argumenten und ein Array von Elementen in Javascript?

    • Perfekt! Danke 🙂 Wenn Stackoverflow lassen Sie mich upvote würde ich 🙂
    InformationsquelleAutor Benry
  2. 1

    @Supernovah: Sie können tatsächlich weisen Sie eine echte Funktion zu setTimeot(). Das befreit Sie von der string-Formatierung, die im Weg stehen, wenn Sie möchten, um komplexere Dinge zu tun als nur die Einstellung einer Eigenschaft.

    Dies ist der code:

    function attachToList() {
  var div = document.getElementById('menu2');
  var els = div.getElementsByTagName('li');
  //create a closure returning an anonymous inner function
  var fn  = function(li) {
    return function() {
      li.style.backgroundColor = "#FFFFCC";
    };
  };
  for (var i=0, len=els.length; i<len; i++) {
    //create function instance suitable for current iteration
    var changeLi = fn(els[i]);
    //pass function reference to setTimeout()
    setTimeout(changeLi, 250*i);
  }
}

    Sowie eine kurze Erklärung:

    Mit einem Schließung ist der trick, macht Sie sicher, wenn setTimeout() löst alle Variablen haben noch die erwarteten Werte.

    Dazu schreiben eine Funktion, die zurückgibt, eine Funktion. Der äußeren Funktion, die Parameter benötigt, die die innere Funktion nicht. Aber es bezieht sich, um die Parameter der äußeren Funktion. In der Loop-Schleife Aufruf der äußeren Funktion (mit den richtigen Parametern) und erhalten eine ganz neue innere Funktion, jedes mal, jeder hat seine eigene version der parameter-Werte. Dies ist die eine, die Sie zuweisen setTimeout().

    • Vielen Dank für diese, ich habe auch verstanden, dass diese von Benry anderen post.
    • Auch ich denke, dass die Verwendung von return Funktion()... verursacht eine Schließung problem mit dem übergeben der variable unten in der Kette. Ohne Verschachtelung, die funktionieren, statt nur in Eltern, Ihre Idee funktioniert.
    InformationsquelleAutor Tomalak
  3. 0

    In der Antwort zu dem Kommentar auf Benry Antwort Von Benry, Nach der mit seinem code das folgende beweist, dass jeder elementLi werden kann, bezeichnet mit els[i]

    function attachToList(){
div = document.getElementById('menu2');
els = div.getElementsByTagName('li');
for (var i=0, len=els.length; i<len; i++) {
setTimeout('els['+i+'].style.backgroundColor=\"#FFFFCC\";',(250*i));
}
}
    InformationsquelleAutor Supernovah
Schreibe einen Kommentar