1

私は同じように見える要素の束を作っています

私は持っている

<div id="e1" class="e1">

        <div class=box>
            <div class='b1'></div>
            <div class='b2'></div>
            <div class='b3'></div>
            <div class='b4'></div>
        </div> 

    <div class='e11'></div>     
    <div class='e12'></div>     
    <div class='e13'></div>     
    <div class='e14'></div>     
    <div class='e15'></div>                                     
        ...more elements
<div>


<div id="e2" class="e2">

        <div class=box>
            <div class='b1'></div>
            <div class='b2'></div>
            <div class='b3'></div>
            <div class='b4'></div>
        </div> 

    <div class='e11'></div>     
    <div class='e12'></div>     
    <div class='e13'></div>     
    <div class='e14'></div>     
    <div class='e15'></div>                                         
        ...more elements
<div>

それらはほとんど同じで、私はいくつかe3の部門を持っていe4ます...

私の質問は、とにかくコードを減らしてオブジェクトを使用してjsで作成する方法があるかどうかです(またはより良いアプローチ)。

誰かヒントをくれませんか？どうもありがとう！

4

1 に答える 1

1

jsFiddle デモ

いくつかの反復パラメーターを取得し、それらのパラメーターに基づいて反復してこれらの html 要素を作成する関数を作成する必要があります。html要素を作成する主な方法は

document.createElement("tagname");

そして、それらを希望する順序で追加する必要があります。それらが完了したら、それらを画面上の要素に追加できます。ループ内での追加は避けてください。多くの要素を作成しても、要素が作成されるたびにではなく一度だけ画面に追加されれば、すばやくレンダリングされます。

簡単な例を次に示します。

<div id="contentZone"></div>
<script>
 var c = document.getElementById("contentZone");
 var content = document.createElement("div");
 for( var i = 0; i < 3; i++ ){
  var d = document.createElement("div");
  d.innerHTML = i + ") Hello :D";
  content.appendChild(d);
 }
 c.appendChild(content);
</script>
于 2013-03-22T22:41:23.880 に答える