javascript - 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 不允许在 anchor 标记内使用 div，但我使用的是 Chrome，但我仍然无法获得正确的样式(请注意 bootstrap CSS 和 bootstrap.js 包含在 fiddle 中)。我有几个问题:

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');
});