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 firstClonedList = $("#testList li:eq(0)").clone();
alert(firstClonedList.html());

问题：警报显示：

<input type=checkbox" /><p> Test A </p>

正确，但我需要显示警告：

<li><input type=checkbox" /><p> Test A </p></li>

Answer 1

试试这个

var firstClonedList = $("#testList li:eq(0)").clone();
alert($('<div/>').append(firstClonedList).html());

我们的想法是创建一个div作为li的包装，然后在html()上调用div。

Working example here

Answer 2

你需要一个outerHTML功能..

jQuery.fn.outerHTML = function() {
  return $( $('<div></div>').html(this.clone()) ).html();
}

现在您可以在任何地方使用outerHTML

alert(firstClonedList.outerHTML());会显示您想要的内容。

Answer 3

html方法获取元素的innerHTML属性。你想要outerHTML proeprty：

firstClonedList.prop('outerHTML');

此解决方案可能存在一些跨浏览器问题，特别是涉及Firefox。有关详细信息，请参阅MDN。

Answer 4

您正确获取其html表示为

的li元素

<li><input type=checkbox" /><p> Test A </p></li>

您希望elem.html()返回整个html，但它会在li元素内返回内部html

来自jquery docs

此方法使用浏览器的innerHTML属性。有些浏览器可能不返回完全复制原始HTML源的HTML 文献。例如，Internet Explorer有时会离开如果属性值仅包含字母数字，则引用它们字符。

要获取元素的整个源html，可以将其插入另一个元素，然后获取该元素的html，例如。

alert($("<div>").append(firstClonedList).html())

在行动here

中查看

Answer 5

您的变量firstClonedList列表包含您需要的内容，但是通过添加.html()，您要求提供firstClonedList的html内容。所以只需使用firstClonedList [0]

var firstClonedList = $("#testList li:first").clone();
console.log(firstClonedList[0]);

如何使用jquery捕获第一个克隆列表？

5 个答案: