如何附加html標簽<br> div 之后？

Question

我想在<div>之后附加一個<br> 。

我的代碼

function generatescene() {
    for (i = 1; i < 101; i++) {
        $('#fightarea').append('<div class=\'block block' + i + '\'><img src=block.png></div>');
        if (i % 5) { } else {
            if (i % 5 == 0) {
                console.log('.block' + i + ' img');
                $('.block' + i).after('<br>');
            }
        }
    }
    $('.block').wrapAll('<div class=\'scene\'></div>');
}

我有這個結果

<div>
  <div class="scene">
    <div class="block block1"><img src="block.png"></div>
    <div class="block block2"><img src="block.png"></div>
    <div class="block block3"><img src="block.png"></div>
    <div class="block block4"><img src="block.png"></div>
    <div class="block block5"><img src="block.png"></div>
    <div class="block block6"><img src="block.png"></div>
    <div class="block block7"><img src="block.png"></div>
    <div class="block block8"><img src="block.png"></div>
    <div class="block block9"><img src="block.png"></div>
    <div class="block block10"><img src="block.png"></div>
    <!-- ... -->
  </div><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br>
</div>

<br>在div.scene之后追加，但我希望<br>在"div.block" + i之后追加。

Answer 1

你可以用

 $('.block' + i).append('<br>');

代替

 $('.block' + i).after('<br>');

解釋：

當您使用 .after() 時，您將元素放在元素之后

前任。

$('.a').after($('.c'));

會導致

<div class='a'>
  <div class='b'>b</div>
</div>
<div class='c'>c</div>

但另一方面在使用 .append() 時

$('.a').append($('.c'));

到

<div class='a'>
  <div class='b'>b</div>
  <div class='c'>c</div>
</div>

希望有所幫助！

Answer 2

試試下面的代碼：

function generatescene() {
  for (i = 1; i < 101; i++) {
    var sthtm ='<div class=\'block block' + i + '\'><img src=block.png></div>';
    if(i==0) shtm ='<div class=\'scene\'>'+shtm;
    if ((i % 5) == 0) {
      sthtm +='<br>';
      console.log('.block' + i + ' img');
    }
    if(i==100) shtm +='</div>';
    $('#fightarea').append(sthtm);
  }
}

Answer 3

問題是這一行：

$('.block').wrapAll('<div class=\'scene\'></div>');

其中，如 jquery wrapAll文檔中所述：

該結構將作為單個組圍繞匹配元素集中的所有元素。

所以它需要所有同級的.block元素並創建一個組，從而將你的<br/>移到.scene div之外。

 function generatescene() { for (i = 1; i < 100; i++) { $('#fightarea').append('<div class=\\'block block' + i + '\\'><img src=block.png></div>'); if (i % 5) { } else { if (i % 5 == 0) { console.log('.block' + i + ' img'); $('.block' + i).after('<br>'); } } } //$('.block').wrapAll('<div class=\\'scene\\'></div>'); } generatescene(); $("#btn").click(function() { $('.block').wrapAll('<div class=\\'scene\\'></div>'); });

 .block { float:left; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="btn">wrap all </button> <hr/> <div id='fightarea'> </div>

---

目前尚不清楚您想要實現的目標，也許首先添加.scene div 然后在其中插入塊？

 function generatescene() { var scene = $('<div class=\\'scene\\'></div>').appendTo("#fightarea"); for (i = 1; i < 100; i++) { scene.append('<div class=\\'block block' + i + '\\'><img src=block.png></div>'); if (i % 5) { } else { if (i % 5 == 0) { console.log('.block' + i + ' img'); $('.block' + i).after('<br>'); } } } } generatescene();

 .block { float:left; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id='fightarea'> </div>