jQuery(document).ready(function($) {
if ($('.category-sidebar')) {
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') {
} else if (divHeader === 'Shop By Figure') {
}*/
switch (divHeader)
{
case 'Color':
case 'Clothes Size':
case 'Price':
$divParent.appendTo('#narrow-by-list');
break;
case 'Product Type':
case 'Shop By Figure':
$divParent.appendTo('#narrow-by-list :last-child');
break;
}
});
}
});
$filterWrap is the container that hold five side navbar items that are all divs
#narrow-by-list is tag that holds #filterwrapper which holds all 5 divs
I want to be able to reorder the divs and place them inside the same container so right now they are:
Color
Shop By Figure
Product Type
Clothes Size
Price
I want the list of divs to be reordered to:
The code above sorts the first three but can't get the last two sorted. Can you guys help?
sort your array before looping with yourArray.sort(), you can remove all previous DOM and rerender for every time the sorting changes