1

私のアプリケーションでは、CSS オンロードを適用し、Jquery を使用して html を追加しています! 私の問題は、新しく追加された要素に CSS が適用されていないことです。新しく追加された html に CSS が適用されていることを確認するにはどうすればよいですか?

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>

ジャバスクリプト:

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

1 に答える 1

1

新しく追加された要素には class.mainがあり、css には が.tabあるため、明らかに新しい要素に css は適用されません。

あなたが達成したいことを正しく理解していれば、新しい要素が追加されたら、loaded() 関数を再実行する必要があると思います。.tabしたがって、既存の要素のオンロードと同じように、新しい div は div でラップされます。

ただし、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ファイルで行います。

于 2013-10-06T23:57:29.127 に答える