同じCLASS名に異なるIDを追加するにはどうすればよいですか？

Question

私が達成したいこと。私はウェブサイトにチェックリストを持っており、ボタンクリックでもう一つ追加したいと思う（trelloカードのように）。それはhtlmの多くですので、私は外部のhtmlファイルから追加したいと思います。しかし、私はそれぞれの追加で異なるIDが必要です。すべてのIDはIDの名前と番号のように見えるはずです。

希望です。

$('.new-checklist').on('click', function(e){ 
    e.preventDefault(); 
    $.get('new-chk.html',function(data) { 
    $('.checklist').append(data); 
    $('.checklist-all').attr("id", "chk"); 
    }); 
    return false; 
}); 

Answer 1

あなたは属性を変更するattr()方法が利用できる無名関数を使用することができます。

$('.checklist-all').attr("id", function(i){ 
    // 'i' : the index of the current element of 
    // of the collection over which the method 
    // iterates: 

    // here we return the string 'chk' concatenated 
    // with the index: 
    return 'chk' + i; 
}); 

idを設定することが、私は個人的にprop()を使用することを好むだろうが、実際には実質的な違いはありません。それでも、私は質問にBarmar's commentを返信します：

最初にチェックボックスにIDが必要なのはなぜですか？

参考文献：

• attr()。

Answer 2

あなたはこれがちょうどそのクラスのすべての要素を選択していないであろうから、あなたが、むしろクラスより、位置によってのようなさまざまなセレクタを試してみてくださいやろうとしているものについては：ここでは

コードですあなたが望むもの。 あなたが行うことができますので、あなたはそれが最後のものである知っている、新しいチェックを追加するために.appendを使用しているので：あなたのコードがあるべき

$('.checklist').children().last().attr("id", "chk"); 

：

また

$('.new-checklist').on('click', function(e){ 
 
     e.preventDefault(); 
 
     $.get('new-chk.html',function(data) { 
 
     $('.checklist').append(data); 
 
     $('.checklist').children().last().attr("id", "{NEW_ID}"); 
 
     }); 
 
     return false; 
 
    });

htmlを外部ファイルに入れても構いませんが、新しいチェックを追加するたびにリクエストを行うのではなく、一度だけロードしてください。