HTMLタグの属性にJavaScript変数を設定する方法

Question

これまでに似たようなタイトルの質問があったので、私は答えを見ました。各リチウム要素に対して、今

$('.collection').append('<li class="collection-item">'+'Hello'+'</li>'); 

：要素はJavaScriptを介して動的に追加され、この要素リチウムで

<ul class="collection with-header"></ul> 

：

私はHTMLでUL要素を有します私はそれを識別するためにクラスの属性に数値を追加したいli要素uniquel yの私は、私が書いたことをthem.Forする属性異なるIDに割り当てることができるように：私はホバーイベントによってIDの李の要素を取得しようとすると

var j = 1; 
$('.collection').append('<li class="collection-item"'+j+'>'+ 'Hello'+'</li>'); 
$('.collection-item'+j).attr("id",list[i].username); 
j++; 

を：

$('.collection-item').hover(
     function(){ 
     var idd = $(this).attr('id'); 
     console.log(idd); 
     } 
); 

を未定義がコンソールに表示されます。

この実装で何が問題になっていますか？

EDIT： リスト[i]の値.usernameが正常に動作している、それは価値が別のファイルから来ているとそれがトラブルを起こしていないのです。

Answer 1

を行います。あなたのコード：

$('.collection').append('<li class="collection-item"'+j+'>'+ 'Hello'+'</li>'); 

は、この最後のマークアップにつながる：

<li class = "collection-item"0>Hello</li> 
<li class = "collection-item"1>Hello</li> 

ゼロにはHTMLのsignficanceを持っていないと場違いです。スフィンクスさんのコメント@

は正解ですが、それは「解雇されていない」され、各リスト項目の彼のコードの結果はそうのような終わりにその番号を持つユニークなクラス名を持つため：

<li class = ".collection-item0">Hello</li> 
<li class = ".collection-item1">Hello</li> 

on-hoverアクションを追加すると、これらの要素は一意のクラスではなく、クラス ".collection-item"で選択されます。

あなたのソリューションは、次のようになります

：

$('.collection').append('<li class="collection-item '+j+'">'+ 'Hello'+'</li>'); 
$('.collection-item.'+j).attr("id",list[i].username); 

これで、最終的なマークアップでは、各リスト項目は二つのクラスがあります - 共有「コレクション・アイテム」クラス、およびそのような数値を：

<li class="collection-item 0"></li> 
<li class="collection-item 1"></li> 

今あなたは、セレクタ$(".collection-item.4")だけでなく、セレクタ$(".collection-item")を持つすべてのコレクションアイテムにアクションを適用する2つのクラスで（この例では、リスト項目4に）各リスト項目を選択することができます。

私が見ているこのコードはやや醜い見つけ、私はそれが私だったら、私は構造的に自分自身それで幸せになるかどうかわからないんだけど、ここではコンセプトの証明としてjsfiddleです： https://jsfiddle.net/0wqeouxo/（上をクリックそれぞれのリストアイテムとそれはそのidを警告する）

私はあなたがクラスのインラインを定義するのではなく、そのループでjqueryの機能からより多くのマイルを得ることができると思う。

Answer 2

それは動的に追加要素です。だからon()を使用し、このようなセレクタを変更することができます。 [class^="collection-item"]それは同じクラス名要素は、これは代わりにあなたのコードに構文エラーがあり

var j = 1; 
$('.collection').append('<li class="collection-item'+j+'">'+ 'Hello'+'</li>'); 
$('.collection-item'+j).attr("id",list[i].username); 
j++; 

は、上記のコードを使用してくださいクラスにいくつかの他の名前で

$(document).on('hover' ,'li[class^="collection-item"]',function(){ 
     var idd = $(this).attr('id'); 
     console.log(idd); 
     }); 

Answer 3

使用を含んで一致します。ホバーが機能するために

、私の知る限りInfactはない任意のHTML属性内のすべてで、私はHTMLのclassName属性の外にあることに、その文字列の結果の中に、私のプレースメントを見ることができるように、この

$('.collection-item'+j).hover(
     function(){ 
     var idd = $(this).attr('id'); 
     console.log(idd); 
     } 
); 

Answer 4

jQueryは非同期で動作するので、idを設定しようとすると、その要素はまだdomにない可能性があります。あなたたとえば、要素を追加する前にIDを設定できます

$('<li class="collection-item '+j+'">'+ 'Hello'+'</li>') 
    .attr("id",list[i].username) 
    .appendTo('.collection');