如何将 CSS 应用于 Javascript 添加的元素答案

【问题标题】：How to Apply CSS to element added by Javascript如何将 CSS 应用于 Javascript 添加的元素
【发布时间】：2013-10-06 23:53:26
【问题描述】：

在我的应用程序中，我正在应用一些 CSS onload，然后使用 Jquery 附加一些 html！我的问题是 CSS 没有应用于新添加的元素。如何确保 CSS 应用于新附加的 html？

请看jsfiddle

HTML：

<body onload="loaded()">
<div id="a">
    <div class="main">a</div>
    <div class="main">b</div>
    <div class="main">c</div>
    <div class="main">d</div>
</div>
<input type="button" value="click Me" onclick="clickMe()" />
</body>

JAVASCRIPT：

function loaded() {
    var posts = $('.main'),
    postCount = posts.length,
    postHalf = Math.round(postCount / 2),
    wrapHTML = '<div class="tab"></div>';
    posts.slice(0, postHalf).wrapAll(wrapHTML);
    posts.slice(postHalf, postCount).wrapAll(wrapHTML);
}

function clickMe() {
  $("#a").append("<div class='main'>e</div>");
}

CSS：

.tab {
    width: 10%;
    border: 1px solid black;
    float: left;
}

【问题讨论】：

在开发者工具中检查标记你会看到发生了什么。
你在说什么 css 规则？

标签： javascript jquery html css

【解决方案1】：

你新添加的元素有 .main 类，而在 css 中你有 .tab，所以显然不会将 css 应用于你的新元素。

如果我正确理解您想要实现的目标，我会说您需要在添加新元素后重新运行 loaded() 函数。所以新的 div 被包裹在 .tab div 中，就像它发生在现有元素的 onload 中一样。

但是你需要在调用loaded()函数之前解包元素，否则会发生一些奇怪的事情。像这样：

function loaded() {
    var posts = $('.main'),
        postCount = posts.length,
        postHalf = Math.round(postCount / 2),
        wrapHTML = '<div class="tab"></div>';
    posts.slice(0, postHalf).wrapAll(wrapHTML);
    posts.slice(postHalf, postCount).wrapAll(wrapHTML);
}

function clickMe() {
  $('.main').unwrap();
  $("#a").append("<div class='main'>e</div>");
  loaded();
}

这应该可以正常工作：http://jsfiddle.net/MfSga/6/

此外，不要在 html 中使用 onload onclick。在js文件中做。

【讨论】：

谢谢@Sandro-Dzneladze 成功了！我不知道unwrap()