0

我正在使用 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');

        });

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

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

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

1 回答 1

2

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

  1. 样式不同的原因是样式应用于<a>标签，并且您正在克隆标签内的内容<a>，而不是标签本身。
  2. Jquery 附加了 selector 和selector的内容，这意味着您看到的是双重的。

如果您想附加样式化的标签，以下代码段应该可以工作：

$(document).ready(function () {
    // store a copy of the container 'list-group-item'
    $appts = $('a.list-group-item').clone()
    // append that copy
    $appts.appendTo('body');
});
于 2013-10-10T20:30:19.490 回答