如何将 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>