Javascript jQuery为每个项追加

我根据一个响应性的布局移动div，该布局要求div位于不同视口的不同位置。在下面的例子中，我希望他们像预期的那样移动。。。除此之外，当页面上有多个“release”div时，它会获取每个“soundcloud”div并将其附加到每个“release”中。因此，如果我有3个“发布”div，每个div都有3个“声音云”div。如何编辑代码，以便在每个“版本”中添加“soundcloud”div，而不添加其他内容

$(function () {
  var mobile = false;
  var desktop = false;
  var $window = $(window);
  function checkWidth() {
    var windowsize = $window.width();
    if (windowsize <= 1024) { 
      if (!mobile) {
        $(".release .soundcloud").appendTo(".release .info");
      }
      mobile = true;
      desktop = false;
    } else {
      if (!desktop) {
        $(".release .soundcloud").appendTo(".release .show-hide");
      }
      mobile = false;
      desktop = true;
    }
  }
  checkWidth();
  $(window).resize(checkWidth);
});

$（函数（）{
var mobile=false；
var=false；
变量$window=$（window）；
函数checkWidth（）{
var windowsize=$window.width（）；
如果（windowsize如@Cuberto所述，使用javascript实现它不是一个好主意

但是要尝试一下，您可以迭代每个
release
元素，并在
release
div中对相应的子元素执行追加

function checkWidth() {
    var windowsize = $window.width();

    var $releaseDivs = $('.release');

    if (windowsize <= 1024) { 
      if (!mobile) {
        $('.release').each(function() {
              $('.soundcloud', this).appendTo($('.info', this));
        });
      }
      mobile = true;
      desktop = false;
    } else {
      if (!desktop) {
         $('.release').each(function() {
              $('.soundcloud', this).appendTo($('.show-hide', this));
        });
      }
      mobile = false;
      desktop = true;
    }
  }

HTML

 <div class="soundcloud hide-mobile">
            <iframe width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/12345678"></iframe> 
        </div>


你能提供HTML吗！！我强烈建议你在媒体查询中使用CSS实现你的响应布局。这比用JavaScript实现基本的响应要容易得多。@Sushanth添加了HTML。@Cuberto我通常会这样做，但根据设计，这个div显著改变了位置，CSS不起作用。我可以使用duplicate和显示/隐藏div，但我想看看是否有JS解决方案。谢谢，这非常有效。我知道关键是添加
.each（）
method。出于好奇，你会用CSS做什么？创建两个相同的div，并用媒体查询显示/隐藏它们？@PaulColinRedmond..很高兴能提供帮助..从未广泛使用媒体查询，但你可以在更新的帖子中尝试该代码。当宽度在1024以内时，它将应用
隐藏手机
CSS太好了，谢谢。如果没有JS方法，我也会这么做。我有点喜欢JS方法，因为它可以保持代码干净，避免重复div。
@media (max-width: 1024px) {
  .hide-mobile {
    display: none;
  }
}

 <div class="soundcloud hide-mobile">
            <iframe width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/12345678"></iframe> 
        </div>