在循环中添加 div jquery

Question

所以当我选择了一些 div 这样的

  var filter = $('.album1.phonepic');

我想将它们添加到我 div 已有的一个空的中，但每个只有 4 个。

   <div class="emptydiv1"></div>
   <div class="emptydiv2"></div>
   var count = 0;

   for(var i = 0; i <= filter.length; i++){
      if(count <= 4){
          $('.emptydiv1').append(filter[i]);
          count++;
      }else {
          $('.emptydiv2').append(filter[i]);
      }        
   }

每当我尝试循环选择的变量时，它都不起作用。请帮助我

Answer 1

尝试

 var filter = $('.album1.phonepic');

   for(var i = 0; i <= filter.length; i++){
      if(i < 4){ // set condition to only < instead of <=
          $('.emptydiv1').append(filter[i]);
          
      }else {
          $('.emptydiv2').append(filter[i]); // add . here before class name
      }        
   }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="emptydiv1"></div>
 <hr/>
<div class="emptydiv2"></div>

<span class="album1 phonepic">Test 1</span>
<span class="album1 phonepic">Test 2</span>
<span class="album1 phonepic">Test 3</span>
<span class="album1 phonepic">Test 4</span>
<span class="album1 phonepic">Test 5</span>
<span class="album1 phonepic">Test 6</span>
<span class="album1 phonepic">Test 7</span>
<span class="album1 phonepic">Test 8</span>

Answer 2

Slice它

$('.emptydiv2').append($('.album1.phonepic').slice(3))
$('.emptydiv1').append($('.album1.phonepic').slice(0,3))

Answer 3

这里有一些适合您的简单代码

var filter = $('.album1.phonepic');

for (var i = 0; i <= filter.length; i++) {
    var emptyDiv = i < 4?$('.emptydiv1'):$('.emptydiv2');
    emptyDiv.append(filter[i]);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span class="album1 phonepic">Test 1</span>
<span class="album1 phonepic">Test 2</span>
<span class="album1 phonepic">Test 3</span>
<span class="album1 phonepic">Test 4</span>
<span class="album1 phonepic">Test 5</span>
<span class="album1 phonepic">Test 6</span>
<span class="album1 phonepic">Test 7</span>
<span class="album1 phonepic">Test 8</span>

<hr/>
<div class="emptydiv1">div 1</div>
<hr/>
<div class="emptydiv2">div 2</div>

或使用 :lt() 和 :gt:()

的另一种方式

var albums  = $('.album1.phonepic');
   

$('.emptydiv1').append(albums.filter(':lt(4)'))
$('.emptydiv2').append(albums.filter(':gt(3)'))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="album1 phonepic">Test 1</span>
    <span class="album1 phonepic">Test 2</span>
    <span class="album1 phonepic">Test 3</span>
    <span class="album1 phonepic">Test 4</span>
    <span class="album1 phonepic">Test 5</span>
    <span class="album1 phonepic">Test 6</span>
    <span class="album1 phonepic">Test 7</span>
    <span class="album1 phonepic">Test 8</span>

<hr/>
    <div class="emptydiv1">div 1</div>
<hr/>
    <div class="emptydiv2">div 2</div>

或数组切片方式

var _array = $('.album1.phonepic');

$('.emptydiv2').append(_array.slice(4))
$('.emptydiv1').append(_array.slice(0,4))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="album1 phonepic">Test 1</span>
        <span class="album1 phonepic">Test 2</span>
        <span class="album1 phonepic">Test 3</span>
        <span class="album1 phonepic">Test 4</span>
        <span class="album1 phonepic">Test 5</span>
        <span class="album1 phonepic">Test 6</span>
        <span class="album1 phonepic">Test 7</span>
        <span class="album1 phonepic">Test 8</span>

    <hr/>
        <div class="emptydiv1">div 1</div>
    <hr/>
        <div class="emptydiv2">div 2</div>

在循环中添加 div jquery

Add div jquery in loop

html

javascript

jquery

selector