Jquery - 克隆没有ID的段落

Question

<div id="note"></div>
<p>
Item 1 
<input name="one" type="checkbox" value="Item 1" />
</p> 
<p>
Item 2 
<input name="two" type="checkbox" value="Item 2" />
</p> 
<p>
Item 3 
<input name="anything" type="checkbox" value="Item 3" />
</p> 
<br/>
Current issue: Does not work as expected. We want to duplicate the paragraph containing the input field whenever it is clicked (involving updating the name). Constraint - Original html cannot be changed.

脚本（在这篇文章的帮助下）

var plen;
$(document).on('click', 'input[type="checkbox"]', function(){
plen = $('p').length
$(this).parent().clone(true).appendTo('body').attr('id',''+plen)
$(this).prop('checked', true);
//alert(plen)
$('#note').text('More of item '+ plen)
});

我快到了，但距离理想的结果还很远。在 JSFiddle 中解释。

JSFiddle 在这里：http://jsfiddle.net/Sergelie/ULywc/

Answer 1

是的，我们可以克隆选中的父 p 标签。下面是示例代码。

HTML

<div id="note"></div>
<p>
Item 1 
<input name="one" type="radio" value="Item 1" />
</p>    

jQuery 代码

var plen;
$(document).on('change', 'input[type="radio"]', function(){
    plen = $('p').length
    $(this).parent().clone(true).appendTo('body').attr('id','one'+plen)
    $(this).prop('checked', true);
    //alert(plen)
    $('#note').text('More of item '+ plen)
});

Demo