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代码完成的输出，只选择已选中的复选框并删除输入标记：

    <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

如何使用jquery选择某个列表的克隆？

1 个答案: