Question

我正在学习qQuery，正在尝试编写一个for循环，该循环遍历div元素的子元素并将每个子元素附加到另一个div。我的代码如下：

for (let i = 0; i < $('.div_select_char').children().length; i++) {
  console.log($('.div_select_char').children().eq(i));
  $('.div_select_enemy').append($('.div_select_char').children().eq(i));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

我遇到的问题是，只有2个子元素（共4个）被附加到新的div，而不是全部。我不知道这个。非常感谢您的帮助！谢谢！

Answer 1

最好将函数的值存储到变量中，而不是在每个循环中都反复调用函数。它利用了脚本的性能，当然，还使循环内的逻辑依赖于精确的循环长度。

我的意思是，append方法会将元素移动到所需的容器。因此，当您循环进入它时，length下面将给出不同的结果

// start loop
$('.div_select_char').children().length // then append, length = 4
$('.div_select_char').children().length // then append, length = 3
$('.div_select_char').children().length // then append, length = 2
$('.div_select_char').children().length // then append, length = 1
// end loop

length在每个循环中不断减少。然后，最好按以下方式存储要循环的起始量

var len = $('.div_select_char').children().length;

for (let i = 0; i < len; i++) {
  console.log($('.div_select_char').children().eq(i));
  $('.div_select_enemy').append($('.div_select_char').children().eq(i));
}

该问题仍然会发生，因为每当您在循环中调用$('.div_select_char').children()时，由于您append对其进行调用，其结果将给出不同的值。因此，存储它的第一个结果就像存储length一样

var len = $('.div_select_char').children().length;
var $children = $('.div_select_char').children();
var $enemyContainer = $('.div_select_enemy');

for (let i = 0; i < len; i++) {
  console.log($children.eq(i));
  $enemyContainer.append($children.eq(i));
}

由于.children()返回的集合表明jQuery也可以链接循环.each()方法，因此实际上可以使代码更简单

var $enemyContainer = $('.div_select_enemy');

$('.div_select_char').children().each(function () {
   $enemyContainer.append($(this))
})

工作示例

var $dest = $('#dest')

$('#origin').children().each(function (){
  $dest.append($(this))
})

body {
  display: flex;
}

.parent {
  width: 50%;
  height: 12rem;
  position: relative;
}

.parent > .child {
  height: 3rem;
  text-align: center;
  background-color: rgba(255,255,255,0.3);
  display: flex;
  justify-content: center;
  align-items: center;
}

.parent:before {
  opacity: .7;
  font-size: small;
  position: absolute;
}

#origin {
  background-color: #d1d1d1;
}

#origin:before {
  content: 'origin';
}

#dest {
  background-color: #f5f5f5;
}

#dest:before {
  content: 'destination';
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="origin" class="parent">
 <div class="child">1</div>
 <div class="child">2</div>
 <div class="child">3</div>
 <div class="child">4</div>
</div>

<div id="dest" class="parent">

</div>

jQuery-遍历div子级并附加到另一个div

1 个答案: