document.getElementsByClassName().innerHTML 总是返回“未定义”

Question

我一定是在某个地方出错了，所以document.getElementsByClassName().innerHTML 总是返回undefined。

首先我通过javascript生成<li>：

$('#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++;
});

我已尝试检查数据，并且工作正常。

现在，假设我想在用户点击我上面生成的<li class="box"> 之一时提醒隐藏的id <p>：

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

但此警报始终返回“未定义”。

Answer 1

document.getElementsByClassName() 返回一个节点列表，而不是一个元素！

应该是这样的：

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

因为您可能有更多 .hidden 元素，并且只想要当前 .box 中的一个（在事件处理程序中将是 this）

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

但为什么不是 jQuery

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