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