Document.getElementsByClassName(). innerHTML всегда возвращает "undefined"

Я, должно быть, допустил ошибку, поэтому document.getElementsByClassName().innerHTML всегда возвращает undefined.

Сначала я создаю <li> через 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>');

Обратите внимание, что в самом правом я имеет элемент <p> с классом hidden. Я использую это, чтобы получить id, который я не хочу показывать своим пользователям.

И это jQuery для генерации данных на этих <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++;
});

Я пытался проверить данные и работать нормально.

Теперь скажем, я хочу предупредить скрытый id <p>, когда пользователь нажимает на один из тех <li class="box">, которые я создал выше:

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

Однако это предупреждение всегда возвращает " undifined".

Ответы

Ответ 1

document.getElementsByClassName() возвращает nodeList, а не элемент!

Итак, это должно быть:

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

и поскольку у вас, вероятно, больше элементов .hidden и требуется только один из текущего .box (который будет this в обработчике событий)

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

но почему бы не jQuery

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