如何將 div 移動到同一容器 div 內的不同 position？

Question

我有一個名為 filterwrapper 的 div，它包含五個 div。

我正在使用 jquery.each 進行循環，我想實際將 div 移動到與特定位置相同的 div 內的不同 position 。 我怎樣才能最好地做到這一點？

所有子 div 都具有相同的 class，我不想更改它。

jQuery(document).ready(function($) {

  var $filterWrap = $('#filter-wrapper .filter-container');

  $('#narrow-by-list').empty();

  $filterWrap.each(function (index) {
    var $currFilter = $(this);
    var $divParent = $currFilter.closest('.filter-container');
    var divHeader = $currFilter.find('.toggle-category-header').text().trim();

    if (divHeader === 'Color') {
      $divParent.appendTo('#narrow-by-list');
    } else if (divHeader === 'Clothes Size') {
      $divParent.appendTo('#narrow-by-list');
    } else if (divHeader === 'Price') {
      $divParent.appendTo('#narrow-by-list');
    } else if (divHeader === 'Product Type') {
      $divParent.appendTo('$filterWrap :last-child');
    } else if (divHeader === 'Shop By Figure') {
      $divParent.appendTo('$filterWrap :last-child');
    }

  });

});

Answer 1

僅供參考，JavaScript 語言自 1995 年創建以來就有switch語句

jQuery(document).ready(function($)
  {
  const $filterWrap = $('#filter-wrapper .filter-container');

  $('#narrow-by-list').empty();

  $filterWrap.each(function (index)
    {
    let
      $currFilter = $(this)
    , $divParent  = $currFilter.closest('.filter-container')
    , divHeader   = $currFilter.find('.toggle-category-header').text().trim()
      ;
    switch (divHeader)
      {
      case 'Color':   
      case 'Clothes Size':         
      case 'Price':
        $divParent.appendTo('#narrow-by-list')
        break;
      case 'Product Type': 
      case 'Shop By Figure':          
        $divParent.appendTo('$filterWrap :last-child')  // <--? bugg
        break;
      } 
    });
  });

（......以及自 1978 年以來的 Whitesmiths 風格）

Answer 2

解決這個問題有點困難，因為您沒有提供任何 html 結構來使用。 但這里有一個嘗試：

 jQuery(document).ready(function($) { var $filterWrap = $('#filter-wrapper.filter-container'); $('#narrow-by-list').empty(); $filterWrap.each(function (index) { var $currFilter = $(this); var $divParent = $currFilter.parent(); var divHeader = $currFilter.find('.toggle-category-header').text().trim(); if (divHeader === 'Color') { $currFilter.appendTo('#narrow-by-list'); } else if (divHeader === 'Clothes Size') { $currFilter.appendTo('#narrow-by-list'); } else if (divHeader === 'Price') { $currFilter.appendTo('#narrow-by-list'); } else if (divHeader === 'Product Type') { $currFilter.appendTo('#other-list'); } else if (divHeader === 'Shop By Figure') { $currFilter.appendTo('#other-list'); } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="filter-wrapper"> <div class="filter-container"> <div class="toggle-category-header">Clothes Size</div> </div> <div class="filter-container"> <div class="toggle-category-header">Color</div> </div> <div class="filter-container"> <div class="toggle-category-header">Price</div> </div> <div class="filter-container"> <div class="toggle-category-header">Product Type</div> </div> <div class="filter-container"> <div class="toggle-category-header">Shop By Figure</div> </div> <h2>Other list</h2> <div id="other-list"></div> <h2>Narrow by</h2> <div id="narrow-by-list"></div> </div>