<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                var headingElements = $(':header').clone();
                var listElements =  $(headingElements).each(function(){
                    $(this).replaceWith($('<li></li>'));
                });
                //EDIT AFTER POSTED, FROM: 
                //$(".toc").append('<ul/>').appendTo(listElements);
                //TO
                $('<ul/>').append(listElements).appendTo(".toc");
            });
        </script>
    </head>
    <body>
        <div class="toc"></div>
        <h1>TOC</h1>
        <h1>one</h1>
        <h2>two</h2>
        <h3>three</h3>
        <h2>two</h2>
    </body>
</html>

当前输出

一个

2

3

2

一个

2

3

2

我的期望

一个

2

3

2

Answer 1

由于您正在创建克隆，因此无需执行replaceWith。只需创建具有相同内容的新元素：

示例： http://jsfiddle.net/xsU7S/1

var headingElements = $(':header');

var listElements = headingElements.map(function() {
    return $('<li></li>',{html:this.innerHTML})[0];
});
$('<ul/>').append(listElements).appendTo(".toc");

您正在使用空header元素替换每个克隆的<li>元素。然后，您尝试使用.each()的返回值，该值实际上仍然是对克隆的header元素的引用。

最后，您实际上是将.toc元素附加到listElements（再次引用克隆的header元素）。

Answer 2

如果我明白你的意图是什么（我不确定我做了什么），我认为你在这里做了一些非常错误的事情。

var headingElements = $(':header').clone();
var listElements =  $(headingElements).each(function()
{
    $(this).replaceWith($('<li></li>'));
});

此处您将每个标题转换为空<li>标记。

$(".toc").append('<ul/>').appendTo(listElements);

现在您将<ul>添加到#toc，然后尝试将#toc添加到分离的空<li>标记集中。

您应该回到jQuery的文档，并阅读每个函数的功能。

在克隆集上的each（）中使用replaceWith（）发出问题

TOC

一个

2

3

2

TOC

一个

2

3

2

TOC

一个

2

3

2

2 个答案: