如何將div移動到同一個容器div內的不同位置？

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

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

所有的子 div 都有相同的類，我不想改變它。

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

  });

});

uj5u.com熱心網友回復：

僅供參考，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 年以來的懷特史密斯風格）

uj5u.com熱心網友回復：

解決這個問題有點困難，因為您沒有提供任何 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>

標籤：javascript html 查询 css

上一篇：使用自定義SVG形狀遮罩/剪裁影像

下一篇：flexboxdiv文本未與子元素行內對齊