document.getElementsByClassName(). InnerHTML zawsze zwraca "niezdefiniowany"

Question

Musiałem gdzieś się pomylić, więc document.getElementsByClassName().innerHTML zawsze zwraca undefined.

pierwszy wygenerowania <li> pośrednictwem javascript:

$('#list').append('<li class="box"><img class="picture" src="images/HotPromo/tagPhoto1.png"/><p class="name"><b>Name</b></p><p class="address">Address</p><p class="hidden"></p></li>'); 

pamiętać, że w większości rację mam <p> element z hidden klasie. Używam tego, aby uzyskać id, którego nie chcę pokazywać swoim użytkownikom.

I to jest jQuery do generowania danych na tych <li>:

$(".box").each(function() { 
    var name, address, picture, id = ""; 
    if (i < result.length) { 
     name = result[i].name; 
     address = result[i].address; 
     picture = result[i].boxpicture; 
     id = result[i].mallid; 
    } 

    $(this).find(".name").html(name); 
    $(this).find(".address").html(address); 
    $(this).find(".picture").attr("src", picture); 
    $(this).find(".hidden").html(id); 
    i++; 
}); 

Próbowałem sprawdzić dane, a jego pracy grzywny.

Teraz, powiedzmy, że chcę, aby ostrzec ukryty id<p> gdy użytkownik kliknie jeden z tych <li class="box"> że wygenerowanego powyżej:

$(".box").click(function() { 
    alert(document.getElementsByClassName('hidden').innerHTML); 
}); 

Jednak ten alert zawsze wraca "undifined".

Answer 1

document.getElementsByClassName() zwraca węzełList, a nie element!

Tak powinno być:

document.getElementsByClassName('hidden')[0].innerHTML 

i jak prawdopodobnie masz więcej .hidden elementów, a chcą tylko jeden wewnątrz bieżącego .box (co byłoby this w procedurze obsługi zdarzenia)

this.getElementsByClassName('hidden')[0].innerHTML 

ale dlaczego nie jQuery

$(".box").click(function(){ 
     alert($('.hidden', this).html()); 
});