Tengo un div llamado filterwrapper y contiene cinco divs.
Estoy usando jquery .each para recorrer y quiero mover los divs a una posición diferente dentro del mismo div como ubicaciones específicas. ¿Cómo puedo hacer eso mejor?
Todos los divs secundarios tienen la misma clase y no quiero cambiar eso.
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'); } }); });Es un poco difícil resolver el problema ya que no proporcionó ninguna estructura html para trabajar. Pero aquí hay un intento:
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>solo como información, el lenguaje JavaScript ha tenido la declaración de cambio desde su creación en 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; } }); });(...y el estilo Whitesmiths desde 1978)