jQuery / HTML5 选择并设置父项和所有子项的样式

jQuery / HTML5 select and style parent and all children

本文关键字：样式 HTML5 选择 设置 jQuery      更新时间：2023-09-26

我正在使用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，但我仍然无法获得正确的样式(请注意，引导 CSS 和引导.js包含在小提琴中(。 我有几个问题：

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

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

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

如果要附加样式标记，以下代码片段应该有效：

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