document.getElementsByClassName（）。innerHTMLは常に "undefined"を返します

Question

document.getElementsByClassName().innerHTMLは常にを返していますので、どこかで間違えていたはずです。です。

最初に私は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>'); 

注最も右に私はhiddenクラスで<p>要素を持っていること。私はidを取得するためにこれを使用していますが、これはユーザーに表示したくありません。

そして、これは、それらの<li>上のデータを生成するjQueryのです：

$(".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++; 
}); 

私は、データをチェックしてみました、そしてその作業罰金てきました。

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

をしかし、このアラートは、常に「はをundifined」返す：

は今、私は、ユーザーが私は上記で生成したもの<li class="box">のいずれかをクリックしたときに隠されたID<p>を警告したいと言うことができます。

Answer 1

document.getElementsByClassName()要素ではなくnodeListを返します。

だから、それは次のようになります。

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

、あなたはおそらくより.hidden要素を持っている、とのみ（イベントハンドラでthisだろう）現在.box内部の1が

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

たいと

なぜjQueryではない

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