リストにアイテムを動的に追加するときのクラスとIDのインクリメント

Question

私はアイテムの複数のリストを持つフォームを持っています。ユーザーは、各リストに項目を追加したり、フォームにリストを追加したりすることができる必要があります。私の問題は、私は各入力 "名前"とリスト "ID"が異なる必要があるということです。ここで

は私が持っているものです。

HTML：

<div class="form"> 
    <h4> 
    List 1 
    </h4> 
    <ul id="list"> 
     <li>Item 1 <input></li> 
    </ul> 
    <button id="addItem"> 
     Add Item 
    </button> 

    </div> 

    <button id="addList"> 
     Add List 
    </button> 
</body> 

はJQuery：

//add List Item 
itemNumber = 2; 

$("#addItem").click(function(){ 

newItem = "<li>Item "+ itemNumber +" <input></li>"; 

    $('#list').append(newItem); 

    itemNumber = itemNumber + 1; 
}) 



//add another list 
listNumber = 2; 

$("#addList").click(function(){ 

newList = "<h4>List "+ listNumber +"</h4> <ul id='list'> <li>Item 1</li> </ul> <button id='addItem'>Add Item</button>"; 

    $('.form').append(newList); 

    listNumber = listNumber + 1;  
}) 

フォームに別のリストを追加した後、現在のコードでは、複数の項目を追加しません。

Here is a JSFiddle.

私はリストや入力に一意の名前とIDを与えるために何ができますか？

*注：HTMLは実際のフォームではありません。 JSFiddleの方が簡単でした。

Answer 1

リストのリストを作成しようとしているようです。

リストのインデックスをそのリスト内のアイテムの数にマップできるように、配列を使用することが最善の方法だと思います。そして、次の2つの操作があります。

1. は、リストを追加します - リストのインデックスを使用し、数

をインクリメントする。これは、インデックス0が一覧であることを意味する - リストに項目を追加し、アレイ

に追加1.インデックス0では、アイテム数がカウントされます。

var lists = []; // array maps index list to item count 
 

 
function getNextItem(index) { 
 
    return `<li>Item ${++lists[index]} <input /></li>`; 
 
} 
 

 
function getNextList() { 
 
    lists.push(0); 
 
    var index = lists.length - 1; 
 
    return `<h4>List ${lists.length}</h4> 
 
    <ul class="list"> 
 
    ${getNextItem(index)} 
 
    </ul> 
 
    <button class="addItem" data-index=${index}>Add Item</button>`; 
 
} 
 

 
$(document).on('click', '.addItem', function() { 
 
    var index = $(this).data('index'); 
 
    var html = getNextItem(index); 
 
    $(this).prev('.list').append(html); 
 
}) 
 

 
$(document).on('click', '.addList', function() { 
 
    var html = getNextList(); 
 
    $('.form').append(html); 
 
}); 
 

 
// Initialize the first item 
 
$('.addList').trigger('click');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="form"></div> 
 
<button class="addList">Add List</button>

私はまた、コードが乾燥しているので、最初のリストを初期化するためのクリックを誘発しました。

Answer 2

次の関数にこのと

$("#addItem").click(function(){ 
    newItem = "<li>Item "+ itemNumber +" <input></li>"; 

    $('#list').append(newItem); 
    itemNumber = itemNumber + 1; 
}); 

を交換してください：

$(document).on('click', '#addItem', function() { 
    var newItem = "<li>Item "+ itemNumber +" <input></li>"; 

    $(this).prev().append(newItem); 
    itemNumber = itemNumber + 1; 
}); 

これは、任意の新しい項目を監視するには、のaddItem IDで、後に文書に追加しました。これを行うと、「Add List」ボタンが「Add Item」と同様に機能するようになります。これはIDでリストを取得していないため、DOM内の位置を使用してリストを検索しているためです。

$('#myInput').attr('name', 'my_desired_name'); 

それとも、単にあなたが入力を構築している文字列を変更することができます：

var newItem = "<li>Item "+ itemNumber +" <input name='" + desiredName + "'></li>"; 

ところで、入力の名前を設定するには、次のようにjQueryのattrのユーティリティ機能を使用することができます