How to move divs to different position inside the same container div?-CodePudding

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

  });

});

CodePudding user response：

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)

CodePudding user response：

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 >
    <div >Clothes Size</div>
  </div>
  <div >
    <div >Color</div>
  </div>
  <div >
    <div >Price</div>
  </div>
  <div >
    <div >Product Type</div>
  </div>
  <div >
    <div >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>