如何将 div 移动到同一容器 div 内的不同 position？

Question

I have div called filterwrapper and it contain five divs.

I am using jquery.each to loop over and I want to actually move the divs to different position within the same div as specific locations. How can I best do that?

All the child divs have the same class and I don't want to change that.

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

just for information, the JavaScript language has had the switch statement since its creation in 1995

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

(...and the Whitesmiths style since 1978)

Answer 2

It's kinda difficult to work out the problem since you didn't provide any html structure to work with. But here's an attempt:

 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>