jQueryの - 私は次のマークアップ持っているIDが挿入されたマークアップ

Question

で一意であることを確認：

：私はjQueryの html()と after()方法を使用して、自身の後にこのマークアップのHTMLコンテンツを挿入しようとしています

<div id="section"> 
    <input type="text" id="myInput"> 
</div> 

を

var newSection = $('#section').html(); 
$('#section').after(newSection); 

だから私はこのようなもので終わるよ：

<div id="section"> 
    <input type="text" id="myInput"> 
</div> 
<input type="text" id="myInput"> 

自分の入力のIDが一意であることを保証する方法はありますか？私は、挿入された入力に対して "myInput2"のようなものを好むでしょう。ありがとうございました。

Answer 1

ここではどの番号入力のための第二の実行または「myInputN」のために特別に「myInput2」、同じコードを保持しますが、ユニークなIDを持つ新しい要素を追加するアプローチだが追加されている：

var newSection = $("#section").html(); 
//create new element with unique ID 
newSection = $(newSection).attr('id', "myInput" + ($("input[id^=myInput").length + 1)); 
$("#section").after(newSection); 

入力フィールドが（互いの上に）次々に表示されるように、あなたが実際に入力した新しいセクションをしたい場合、我々は単に「myInput」で始まるすべての入力タグを照会次のユニークなID

を決定するために

あなたはcreaする次のアプローチを使用することができますteのユニークなIDを持つ新しいセクションや新しいIDを持つ含む入力：

//Create a new section by cloning the first section 
var newSection = $("#section").clone(); 
//Set the new unique ID for the section 
$(newSection).attr('id', "section" + ($("div[id^=section").length + 1)); 
//Set the new unique ID for child input element 
$(newSection).find("input").attr('id', "myInput" + ($("input[id^=myInput").length + 1)); 
//Add the new section last so each section appears in order by ID 
$("div[id^=section").last().after(newSection); 

Answer 2

$(selector).lengthを使用すると、要素が存在するかどうかを確認できます。その後、whileループを使用して末尾の数字を増やすことができます。

var i = 0; 
selector = "#section"; 
while($(selector + i).length) { 
    i++; 
} 
// selector is now a unique value. append it to the page