Question

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

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

Answer 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文件中执行。

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

1 个答案: