如何使用jquery選擇某個列表的克隆？

Question

如何使用jquery選擇列表的某個克隆？

<ul id=testList> 
     <li><input type=checkbox" /><p> Test A </p></li> 
     <li><input type=checkbox" /><p> Test B </p></li> 
     <li><input type=checkbox" /><p> Test C </p></li> 
     <li><input type=checkbox" /><p> Test D </p></li> 
     <li><input type=checkbox" /><p> Test E </p></li> 
</ul> 

    var $cloneList = $("#testList").clone(); 

    $cloneList.find("li input:checked")each(function() 
    { 
      alert($(this.outerHTML); 
    }); 

我想上面這個jQuery代碼來完成輸出只選擇已選定的checkboxs下面列出並刪除輸入標籤：

<li><p> Test E </p></li> 

Answer 1

要獲得正是你問什麼對，代碼是這樣的：

$(document).ready(function(){ 
    $('#clone').click(clone); 
}); 

function clone(){ 
    clonedList = $('#testList').clone(); 
    clonedList.find('input[type=checkbox]:not(:checked)').each(function(){ 
     $(this).parent().remove(); 
    }); 
    clonedList.find('input').remove(); 
    alert(clonedList.html()); 
} 

退房的工作小提琴：http://jsfiddle.net/Kh476/3/

我想指出的一件事 - 那些沒有適當標籤的複選框讓我瘋狂。做到這一點，而不是：

<label><input type="checkbox" name="group1" value="A"/> Check This A</label> ​ 

這將使屏幕閱讀器來找出哪些文本與複選框推移，它也將讓人們對文本中單擊而不是讓找框中點擊。更多可用。

要獲得outerHtml，檢查這個答案：Get selected element's outer HTML