如何将内容从一组类分发到另一组 jQuery

Question

我有两个单独的 div 元素，每个元素都有相同数量的 img 元素。加载页面时，我想将 src 属性从 "plus" 传递到 "minus" 和 jQuery。第一个 "circle" src 应该传递给第一个 "square" src，第二个 "circle" src 应该传递给第二个 "square" src,等等

<div id="plus">
    <img class="circle" src="one.jpg"/>
    <img class="circle" src="two.jpg"/>
    <img class="circle" src="three.jpg"/>
</div>
<div id="minus">
    <img class="square" src="#"/>
    <img class="square" src="#"/>
    <img class="square" src="#"/>
</div>

做这样的事情最好的方法是什么？某种嵌套的 each 函数之类的？

Answer 1

您可以遍历 plus 中的每个 img 并将其插入 minus

$("#plus .circle").each() 将遍历 "plus" div.
您可以在元素上使用 .attr()´ to bothgetandset` 属性。

$("#plus .circle").each(function(i, x) {
  var src = $(this).attr("src");
  $("#minus .square:eq(" + i + ")").attr("src", src)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="plus">
  <img class="circle" src="one.jpg" />
  <img class="circle" src="two.jpg" />
  <img class="circle" src="three.jpg" />
</div>
<div id="minus">
  <img class="square" src="#" />
  <img class="square" src="#" />
  <img class="square" src="#" />
</div>

Answer 2

$("#plus").find('img').each(function(i, v) {
  $("#minus").find('img').eq(i).attr('src', $(this).attr('src'))

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="plus">
  <img class="circle" src="one.jpg" />
  <img class="circle" src="two.jpg" />
  <img class="circle" src="three.jpg" />
</div>
<div id="minus">
  <img class="square" src="#" />
  <img class="square" src="#" />
  <img class="square" src="#" />
</div>

使用.each()循环加号div
使用 attr() 设置 src 为 minus div img

如何将内容从一组类分发到另一组 jQuery

How to distribute contents from one group of classes to another group with jQuery

javascript

each

jquery

class

如何将内容从一组 类 分发到另一组 jQuery

How to distribute contents from one group of classes to another group with jQuery

javascript

each

jquery

class

如何将内容从一组类分发到另一组 jQuery