jQuery为每个项目追加

jQuery append for each item

本文关键字：项目 追加 jQuery      更新时间：2024-06-14

我正在根据响应布局移动div，该布局要求它们位于不同视口的不同位置。在下面的例子中，我希望他们像预期的那样移动。。。但是，当我在页面上有多个"release"div时，它会获取每个"soundcloud"div并将其附加到每个"release"。因此，如果我有3个"发布"div，每个div都有3个"soundcloud"div。如何编辑代码，以便在每个"release"中附加"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);
});

已编辑以添加HTML:

<div class="release clearfix">
    <span class="show-details open-close">&#10133;</span>
    <figure class="artwork">
        <img src="assets/images/artwork1.jpg" alt="Album Artwork">
    </figure>
    <div class="info">
        <h1 class="title">Title</h1>
        <div class="soundcloud">
            <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>                              
    </div>              
    <div class="show-hide">
        <div class="options clearfix">
            <p>&pound;9.99</p>
            <p><span>&#59197;</span><a href="#" target="_blank">Buy</a></p>
        </div>
        <div class="tracks">
            <h3>Tracklisting</h3>
            <ul>
                <li>Track 1</li>
            </ul>
            <h3>Produced by</h3>
            <p>Author</p>
        </div>
        <div class="further-info">
            <h3>Release Date</h3>
            <p>14/12/2013</p>
        </div>                      
    </div>
</div>

正如@Cuberto所提到的，使用javascript实现它不是一个好主意。

但是，为了尝试它，您可以对每个release元素进行迭代，并在release分区内对相应的子元素执行附加

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;
    }
  }

我没有试过，但你可以试试这个

@media (max-width: 1024px) {
  .hide-mobile {
    display: none;
  }
}

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>
相关文章：