jQuery為每個項目附加

Question

我正在根據響應式布局移動div，該布局要求它們位於不同視口的不同位置。 在下面的示例中，我希望它們按照預期的那樣移動...除了在頁面上有多個“ release” div時，它會將每個“ soundcloud” div附加到每個“ release”中。 因此，如果我有3個“發布” div，則每個人都有3個“ soundcloud” 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);
});

編輯添加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>

Answer 1

正如@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;
    }
  }

我沒有嘗試過，但是你可以嘗試一下

@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>