如何将 div 移动到同一容器 div 内的不同位置？答案

【问题标题】：如何将 div 移动到同一容器 div 内的不同位置？
【发布时间】：2022-01-23 15:37:33
【问题描述】：

我有一个名为 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');
    }

  });

});

【问题讨论】：

您的逻辑中是否存在特定的错误/问题，或者您只是在寻求代码审查？
你能添加一些（最小的）html吗？这将有助于理解问题。您正在谈论的 5 个 div 是具有过滤容器类的那些？它们是否嵌入在具有相同类名（过滤器容器）的元素中？ .filter-container 中的 .filter-container？似乎是错误的，但这就是 jQuery 代码所暗示的，因为您编写了$currFilter.closest('.filter-container')。但是一些 html 会有所帮助:)
我猜你想获取每个过滤容器元素的父元素？你可以使用$(this).parent()。

标签： javascript html jquery css

【解决方案1】：

解决这个问题有点困难，因为您没有提供任何可使用的 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>

【讨论】：

【解决方案2】：

仅供参考，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 风格）

【讨论】：