一意の入力フィールドを持つ新しいliリストにテキストを使用

Question

基本的には、特定のul liをクリックするだけで、入力フィールドでクリックされたそれぞれのリストが作成されます。だから、

<ul id="cultsSelect" > 
    <li>randomtext 1</li> 
    <li>randomtext 2</li> 
    <li>randomtext 3</li> 
</ul> 

<ul id="newList" > 

</ul> 

ユーザーは、私は、テキストを一意にユニークname属性を含む入力フィールドに新しいリストに追加するliをクリックした場合。

は

期待される成果：

（上から1番目と3番目のliをクリックした場合）

<ul id="newList" > 
    <li>randomtext 1 <input name="perc_1"></li> 
    <li>randomtext 3 <input name="perc_2"></li> 
</ul> 

Javascriptを：この機能は、#newList

$('#cultsSelect li').click(function() { 
//var input = '<input id"perc_"+count>' 
$(this).clone().appendTo('#newList'); 

//document.getElementById('').innerHTML += input; 
}) 

にテキストliを追加します私の問題は、それぞれに追加することです。li入力はnameと一意です。私はforループを使用しようとしましたが、無限のループが張り巡らされてしまったので、いくつかのものをコメントアウトしました。

Answer 1

したがって、新しいli要素がクリックされるたびに増加する変数countを持つことができます。次に、delegation eventを使用して、クリックされたli要素だけを聞くことができます。

var count = 0; 
 
$('#cultsSelect').on("click","li",function() { 
 
    count++; 
 
    var name = "perc_"+count; 
 
    var element = '<input name="' + name + '">' 
 
    
 
    //get the text of the li 
 
    var text = $(this).text(); 
 
    //add to new List 
 
    $('#newList').append('<li>'+ text + element + '</li>'); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="cultsSelect" > 
 
    <li>randomtext 1</li> 
 
    <li>randomtext 2</li> 
 
    <li>randomtext 3</li> 
 
</ul> 
 

 
<div>New list </div> 
 

 
<ul id="newList" > 
 

 
</ul>

Answer 2

このような体験をしてみませんか？

$(document).on('click', '#cultsSelect li:not(.clicked)', function() { 
//var input = '<input id"perc_"+count>' 
$(this).addClass('clicked').clone().appendTo('#newList'); 

//document.getElementById('').innerHTML += input; 
}) 

すでにクラス/データ - *属性を追加し、後でその特定のクラス/データ - *属性が設定されていないだけで、それらの要素をクリックしのために聞くことによってクリックされた要素思い出すことができます。