FOR - getElementByName и я ценю

Question

После моего кода:

for(var i =0; i < document.getElementById('test').getElementsByTagName("li").length; i++){         
    document.getElementById('test').getElementsByTagName("li")[i].onmouseover= function(){ 
    alert(document.getElementById('test').getElementsByTagName("li")[i].innerHTML); 
    } 
} 

HTML:

<div id="test"> 
    <ul><li>test</li><li>test2</li><li>test3</li><li>test4</li></ul> 
</div> 

JSfiddle: http://jsfiddle.net/Pwddf/1/

"я" всегда присваивается последнее значение, а затем не работает , Как решить?

Answer 1

Вот очень краткое решение, которое работает в jsfiddle внутри Firefox и IE9:

var elems = document.getElementById("test").getElementsByTagName("li"); 
for(var i =0; i < elems.length; i++){ 
    elems[i].onmouseover= function(e){ 
     console.log(this.innerHTML); 
     console.log(e); 
    } 
} 

http://jsfiddle.net/8LyhN/1/

Не зная, что все, что вы собираетесь делать в вашем случае наведения мыши, я рекомендую переходя в событие, чтобы вы могли ссылаться на него как на «e».

Answer 2

Похоже, вы хотите querySelectorAll вместо:

var elems = document.querySelectorAll("#test ul li"); 
for (var i = 0; i < elems.length; i++) { 
    elems[i].onmouseover = function() { 
     console.log("See?"); 
    } 
} 

Если вам действительно нужно, что i значение, использовать замыкание внутри for:

(function(i) { 
    elems[i].onmouseover = function() { 
     console.log("See?" + i); 
    } 
})(i) 

Демо: http://jsfiddle.net/Pwddf/2/

Answer 3

Проблема заключается в том обзорное. Если вы создаете функцию внутри цикла, переменные цикла всегда будут иметь свои последние значения цикла. В принципе, цикл выполняется, но переменные внутри объявления функции не оцениваются до тех пор, пока не будет вызвана функция, и в какой точке «i» будет равна последнему значению. Вы можете использовать закрытие, чтобы немедленно решить проблему.

for(var i =0; i < document.getElementById('test').getElementsByTagName("li").length; i++){ 
    (function(i) {         
     document.getElementById('test').getElementsByTagName("li")[i].onmouseover= function(){ 
      alert(document.getElementById('test').getElementsByTagName("li")[i].innerHTML); 
     }; 
    })(i); 
} 

Я также согласен с tymeJV в том, что сначала вы должны хранить свои элементы, а не переубирать их.

Answer 4

Вам необходимо кэшировать i;

for(var i =0; i < document.getElementById('test').getElementsByTagName("li").length; i++) 
    { 
     var _i = i;        
     document.getElementById('test').getElementsByTagName("li")[i].onmouseover= function() 
     { 

     alert(document.getElementById('test').getElementsByTagName("li")[_i].innerHTML); 
     } 
    } 

// Даже лучше;

var elements = document.getElementById('test').getElementsByTagName("li"); 
for(var i =0; i < elements.length; i++) 
{         
    elements[i].addEventListener('mouseover', function() 
    { 
    alert(this.innerHTML); 
    }); 
} 

Answer 5

Вам следует сделать это, если вы действительно хотите использовать javascript, чем JQuery.

var ul = document.getElementById("test"); 
var li = ul.getElementsByTagName("li"); 

for(var i =0; i <li.length; i++){         
    li[i].onmouseover= function(){ 
     alert(this.innerHTML); 
    } 
} 

чек здесь: http://jsfiddle.net/alaminopu/Pwddf/5/