[解決済み] document.getElementsByClassName().innerHTML は常に "undefined" を返します。

質問

どこかで間違えたのか document.getElementsByClassName().innerHTML が常に返されます。 未定義 .

まず <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 クラスがあります。私はこれを使って イド これはユーザーに見せたくないものです。

そして、これはそれらのデータを生成するための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++;
});

データを確認してみましたが、問題なく動作しています。

では、非表示の イド <p> のいずれかをクリックすると <li class="box"> で生成される。

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

しかし、このアラートは常に " を返します。 未定義 となります。

解決方法は？

document.getElementsByClassName() は要素ではなく、ノードリストを返します!

ということは、:

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

そして、おそらくもっと多くの .hidden 要素の中にあるものだけが必要であり、現在の .box (となる）。 this イベントハンドラで）

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

しかし、なぜjQueryではないのか

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