jQuery / HTML5选择并设置父级和所有子级

Question

我正在使用bootstrap 3.0来制作漂亮的侧边栏。我正在寻找克隆 使用jQuery的当前一点点HTML并将其附加到页面：

<a class="list-group-item" href="#">
                <div class="list-group">
                <h4 class="list-group-item-heading">Upcoming awesome</h4>
                <p class="list-group-item-text">Awesome stuff is here</p>                
                </div>
            </a>

和JS

 $(document).ready(function () {
            $appts = $('a.list-group-item > div').contents().andSelf().clone()
            $appts.appendTo('body');

        });

目前，我没有得到我希望的行为，你可以看到here

我知道HTML4不允许在锚标签内部使用div，但是我使用Chrome并且我仍然无法正确使用样式（请注意引导CSS和bootstrap.js包含在小提琴中）。我有几个问题：

1. 为什么新添加的jQuery对象的样式与源代码中包含的样式不同？
2. 为什么jQuery附加了初始jQuery对象的额外副本？

Answer 1

我会按顺序回答你的问题。

1. 样式设置不同的原因是因为样式应用于<a>标记，并且您正在 <a>标记中克隆内容，而不是标记本身。
2. Jquery正在追加选择器的内容和选择器，这意味着您看到了双倍。

如果您想附加样式标记，则以下代码段应该有效：

$(document).ready(function () {
    // store a copy of the container 'list-group-item'
    $appts = $('a.list-group-item').clone()
    // append that copy
    $appts.appendTo('body');
});