1

如何使用 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>
4

5 回答 5

2

尝试这个

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

这个想法是创建一个div作为你的包装器，li然后只调用html().div

这里的工作示例。

于 2012-04-05T16:09:24.003 回答
2

你需要一个outerHTML特性..

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

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

alert(firstClonedList.outerHTML());会显示你想要的。

于 2012-04-05T16:11:03.483 回答
1

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

firstClonedList.prop('outerHTML');

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

于 2012-04-05T16:11:52.920 回答
0

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

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

​</p>

于 2012-04-05T16:19:35.223 回答
0

您正确获取了li其 html 表示为的元素

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

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

来自 jquery文档

此方法使用浏览器的 innerHTML 属性。某些浏览器可能不会返回与原始文档中的 HTML 源完全相同的 HTML。例如，如果属性值仅包含字母数字字符，Internet Explorer 有时会省略属性值的引号。

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

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

在这里看到它的作用

于 2012-04-05T16:09:36.890 回答