Trying to sort children div based on data attributes
The html code below is being generated by a CM and the data can be retrieved in any random order.
the html code is
<section class="box explore">
<div id="ProductContainer" class="row">
<div id="1232132" data-name="B" data-category="Category_A" class="explore-cell">
<h>B</h>
<p>Category_A</p>
</div>
<div id="123" data-name="A" data-category="Category_A" class="explore-cell">
<h>A</h>
<p>Category_A</p>
</div>
<div id="1232152351" data-name="C" data-category="Category_A" class="explore-cell">
<h>C</h>
<p>Category_A</p>
</div>
<div id="12342341" data-name="E" data-category="Category_B" class="explore-cell">
<h>E</h>
<p>Category_B</p>
</div>
<div id="1325321" data-name="D" data-category="Category_B" class="explore-cell">
<h>D</h>
<p>Category_B</p>
</div>
</div>
java
$('div').sort(function (a, b) {
var contentA = $(a).attr('data-name');
var contentB = $(b).attr('data-name');
return (contentA < contentB) ? -1 : (contentA > contentB) ? 1 : 0;
})
Jsfiddle http://jsfiddle.net/w8gkshue/
if someone can point me in the right direct on how to best sort either by Product Name or Category.
Updated hope this gives better explination
EDIT: I missed the jQuery tag... leaving the answer still.
var productCt = document.getElementById('ProductContainer'),
reInsertProductCt = tempRemove(productCt);
[].slice.call(productCt.children)
.sort(function (a, b) {
var aName = a.dataset.name,
bName = b.dataset.name;
return aName < bName? -1 : +(aName > bName);
})
.forEach(productCt.appendChild.bind(productCt));
reInsertProductCt();
function tempRemove(el) {
var parent = el.parentNode,
nextSibling = el.nextSibling;
parent.removeChild(el);
return function () {
if (nextSibling) parent.insertBefore(el, nextSibling);
else parent.appendChild(el);
};
}
<div id="ProductContainer" class="row">
<div id="1232132" data-name="B" data-category="Category_A" class="explore-cell">
<h>TEST NAME B</h>
<p>TEST</p>
</div>
<div id="123" data-name="A" data-category="Category_A" class="explore-cell">
<h>TEST NAME A</h>
<p>TEST</p>
</div>
<div id="1232152351" data-name="C" data-category="Category_A" class="explore-cell">
<h>TEST NAME C</h>
<p>TEST</p>
</div>
<div id="12342341" data-name="E" data-category="Category_B" class="explore-cell">
<h>TEST NAME E</h>
<p>TEST</p>
</div>
<div id="1325321" data-name="D" data-category="Category_B" class="explore-cell">
<h>TEST NAME D</h>
<p>TEST</p>
</div>
</div>
You can use .sort method like this
var $wrapper = $('#ProductContainer');
$wrapper.find('.explore-cell').sort(function (a, b) {
return a.getAttribute('data-name') > b.getAttribute('data-name');
})
.appendTo( $wrapper );
But I don't sure about the cross browsing support
Calling only sort on them won't actually visually change the DOM, it just returns a sorted collection. So basically you just need to get the collection, sort it, then return it. Something like this should work:
$('#ProductContainer > div').detach().sort(function (a, b) {
var contentA = $(a).data('name');
var contentB = $(b).data('name');
return (contentA < contentB) ? -1 : (contentA > contentB) ? 1 : 0;
}).appendTo('#ProductContainer');
You'll want to make sure that you use the detach() method and not remove(), as detach() will retain all of the data and events associated with the collection items.
Why choose to sort by category or by name when you can sort by both?
I tried to write a generic multisort function generator, which should also work with the native array sort function.
JSFIDDLE HERE
A function that generates the multisort, it takes two parameters.
The column priority list order (first by category or by name? You decide).
I also wanted a way to provide values for columns (since you might not retrieve them the same way for each of them), it is an object that describes for each column a function to retrieve data.
Here it is
function getMultisortFn(columns, provideColumnData) {
return function (a, b) {
for (var i = 0, l = columns.length; i < l; i++) {
var column = columns[i];
var aColumnData = provideColumnData[column.name](a, column.name);
var bColumnData = provideColumnData[column.name](b, column.name);
if (aColumnData !== bColumnData) {
if (column.asc) {
return String.prototype.localeCompare.call(aColumnData, bColumnData);
}
return String.prototype.localeCompare.call(bColumnData, aColumnData);
}
}
};
}
Now this is the part where you actually use the multisort generated
function retrieveDataAttribute(item, attribute) {
return $(item).data(attribute);
}
var $container = $('#ProductContainer');
var $products = $container.find('div');
var multisort = getMultisortFn([{
name: 'category',
asc: false
}, {
name: 'name',
asc: true
}], {
name: retrieveDataAttribute,
category: retrieveDataAttribute
});
$products.sort(multisort);
And finally the DOM manipulation to apply the new order
$products.detach().appendTo($container);
EDIT thanks to plalx:
$container.detach().append($products).appendTo('section.box.explore');
Related
I have HTML like this:
<div class="foo">
<div class="bar1">A</div>
<div class="bar2">B</div>
<div class="bar3">C</div>
</div>
<div class="foo">
<div class="bar1">D</div>
<div class="bar2">E</div>
<div class="bar3">F</div>
</div>
<div class="foo">
...etc.
I am trying to iterate through the "foo" divs to create objects like {bar1: A, bar2: B, bar3: C} with code sort of like this:
var arrayOfObjects= [];
var rows = $(".foo");
for (var i=0; i<rows.length; i++) {
var row = rows[i];
arrayOfObjects.push(
{
bar1: row.find(".bar1").text(),
bar2: row.find(".bar2").text(),
bar3: row.find(".bar3").text()
}
);
}
I understand that this doesn't work because the original var rows = $(".foo"); creates an array of DOM elements, which don't have find() as a function. I also know that within the loop, I could start using elementByClass and innerHtml, but I feel like my brain starts crying whenever I start mixing jQuery-style and DOM-style selectors in the same code.
Is there a way to fix my code above so that I'm using jQuery selectors within the loop?
You can wrap your elements as jQuery objectslike this:
arrayOfObjects.push(
{
bar1: $(row).find(".bar1").text(),
bar2: $(row).find(".bar2").text(),
bar3: $(row).find(".bar3").text()
}
);
This makes you row a JQuery object, which has the 'find' method.
You can easily iterate through .row divs by using each(),
var arrayOfObjects= [];
$(".foo").each(function(){
var items = {"bar1" : $(this).find('.bar1').text(),"bar2" : $(this).find('.bar2').text(), "bar3" : $(this).find('.bar3').text()};
arrayOfObjects.push(items); //If you want to push all into an object and then into an array
//or to use it on its own
$(this).find('.bar1').text();
$(this).find('.bar2').text();
$(this).find('.bar3').text();
});
Hope this helps.
//find all the foo, and map them into new elements
var result = $('.foo').map(function(index, element){
//we want to map all the children of the element into a single object
return $(element).children().get().reduce(function(aggregate, childElement){
//get the class off of the child and it's value, put them in the object
aggregate[childElement.className] = childElement.innerText;
return aggregate;
}, {}); //second argument to the reduce() is the starting element
}).get(); //use get() to break the array out of the jQuery object
console.log(result);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="foo">
<div class="bar1">A</div>
<div class="bar2">B</div>
<div class="bar3">C</div>
</div>
<div class="foo">
<div class="bar1">D</div>
<div class="bar2">E</div>
<div class="bar3">F</div>
</div>
$(document).ready(() => {
var arrayOfObjects = $('.foo').map(function() {
return $(this).find('>*').map(function(obj) {
return {
class: $(this).attr('class'),
text: $(this).text()
};
}).get().reduce( (obj, arr) => {
obj[arr.class] = arr.text;
return obj;
}, {});
}).get();
console.log(arrayOfObjects);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="foo">
<div class="bar1">A</div>
<div class="bar2">B</div>
<div class="bar3">C</div>
</div>
<div class="foo">
<div class="bar1">D</div>
<div class="bar2">E</div>
<div class="bar3">F</div>
</div>
hope this helps you :)
Something along these lines with .each would probably work
const $rows = $('.foo');
let arrayOfObjects = [];
$rows.each(function(i) {
const $row = $(this);
let obj = {};
$row.children().each(function(ch) {
obj = { ...obj, [this.className]: $(this).text() };
});
arrayOfObjects = [ ...arrayOfObjects, obj ];
});
console.log(arrayOfObjects);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="foo">
<div class="bar1">A</div>
<div class="bar2">B</div>
<div class="bar3">C</div>
</div>
<div class="foo">
<div class="bar1">D</div>
<div class="bar2">E</div>
<div class="bar3">F</div>
</div>
Unfortunately, I could not solve that myself. I have a list with several DIV which ALWAYS have the same ID and class. The list I sort according to the "data-sort" attributes and it works wonderfully.
Currently it looks like this:
<div id="divList">
<div id="hsdf" data-sort="1"></div>
<div class="hsdf" data-sort="1"></div>
<div class="vasfd" data-sort="2"></div>
<div id="vasfd" data-sort="2"></div>
<div id="asdfas" data-sort="3"></div>
<div class="asdfas" data-sort="3"></div>
</div>
I would like however in the list sorting first the class and then the ID comes. Like here:
<div id="divList">
<div class="hsdf" data-sort="1"></div>
<div id="hsdf" data-sort="1"></div>
<div class="vasfd" data-sort="2"></div>
<div id="vasfd" data-sort="2"></div>
<div class="asdfas" data-sort="3"></div>
<div id="asdfas" data-sort="3"></div>
</div>
The "data-sort" attribute sorting is done with the jQuery:
jQuery('#divList').find('div').sort(function (a, b) {
return jQuery(a).attr('data-sort') - jQuery(b).attr('data-sort');
}).appendTo('#divList');
Do you have any ideas for me?
You can use this in your sort function:
return jQuery(a).attr('data-sort') - jQuery(b).attr('data-sort')
|| !!jQuery(a).attr("id") - !!jQuery(a).attr("class");
This checks for the existence of an id and for a class. If the class exists, the expression after || will evalutate to -1, if the ID exists, it will evalutate to 1. This will be relevant if the expression before || evaluates to 0 (when they have the same data-sort value).
Something like this should work:
jQuery('#divList').find('div').sort(function (a, b) {
var diff = jQuery(a).attr('data-sort') - jQuery(b).attr('data-sort');
if (diff == 0) {
if (jQuery(a).attr('class') && jQuery(a).attr('class') != '') {
diff = -1;
} else {
diff = 1;
}
}
return diff;
}).appendTo('#divList');
I have this HTML which is a list of elements:
<div class="container">
<div class="apple-0">first-apple</div>
<div class="apple-1">second-apple</div>
<div class="apple-2">third-apple</div>
<div class="apple-3">forth-apple</div>
<div class="apple-4">fifth-apple</div>
</div>
I've gotten an array, for example, which is [3,4,0,2,1] I need to sort the list in to this order.By this I mean that the third element <div class="apple-3">third-apple</div> should be the first. The second element should be the forth-apple.
How can I change it in an efficient way? This is the expected output:
<div class="container">
<div class="apple-3">forth-apple</div>
<div class="apple-4">fifth-apple</div>
<div class="apple-0">first-apple</div>
<div class="apple-2">third-apple</div>
<div class="apple-1">second-apple</div>
</div>
jQuery can be used.
You can do this by looping through the array and appending each div by it's matched index. Try this:
var $divs = $('.container > div').detach();
[3, 4, 0, 2, 1].forEach(function(value) {
$divs.eq(value).appendTo('.container');
});
Working example
Note that if you need to support older browsers (< IE9) then you would need to replace forEach() with a standard for loop.
You can try something like this:
$("#sort").on("click", function() {
var data = [3, 4, 0, 2, 1];
var result = "";
data.forEach(function(item) {
result += $(".container").find(".apple-" + item)[0].outerHTML;
});
$(".container").html(result);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class="container">
<div class="apple-0">first-apple</div>
<div class="apple-1">second-apple</div>
<div class="apple-2">third-apple</div>
<div class="apple-3">forth-apple</div>
<div class="apple-4">fifth-apple</div>
</div>
<button id="sort">Sort</button>
Simply iterate the indexes array and keep pushing the child at nth-index
var output = [];
var indexes = [3,4,0,2,1];
indexes.forEach(function(value, index){
output.push($(".container div").eq(indexes[index])[0].outerHTML);
});
console.log(output);
$(".container").html(output.join(""));
Demo
you can try:
UPDATE:
var arr = [3,4,0,2,1];
var nodes = [];
arr.forEach(funtion(value){
var node = $('.container .apple-'+value)[0];
nodes.push(node);
});
$('.container').html(nodes);
demo
Other answers with eq are good, but if you want to sort again with a different array, or the array is unsorted initially, then they would fail. Also you asked for an efficient method, using native loops instead of jquery's each gives performance benefits. So my answer to this is
$(document).ready(function () {
var inputEls = $('#awesomeContainer').find('>').get(),
$output = $('#awesomeOutput'),
order = [3,4,0,2,1],
output = [],
myValue,
newIndex,
i,
length = inputEls.length;
for (i = 0; i < length; i += 1) {
myValue = Number((inputEls[i].className || "").replace("apple-", ""));
if (myValue >= 0) {
myValue = order.indexOf(myValue);
myValue > -1 && (output[myValue] = inputEls[i].outerHTML);
}
}
$output.append(output.join(''));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<b>Input: </b>
<div id="awesomeContainer" class="container">
<div class="apple-0">first-apple</div>
<div class="apple-1">second-apple</div>
<div class="apple-2">third-apple</div>
<div class="apple-3">forth-apple</div>
<div class="apple-4">fifth-apple</div>
</div>
<br/>
<b>Sorted: </b>
<div id="awesomeOutput" class="container">
</div>
I'm trying to sort divs with jQuery and I have this html:
<div id="container">
<button type="button" id="sort">sort</button>
<div class="entry" id="lala">
<a target="_blank" href="http://lala">lala</a>
<span class="times">4</span>
</div>
<div class="entry" id="lele">
<a target="_blank" href="http://lele.com">lele.com</a>
<span class="times">1</span>
</div>
<div class="entry" id="lolo">
<a target="_blank" href="http://lolo">lolo.com</a>
<span class="times">2</span>
</div>
</div>
I'd like to use the class "times" value to sort the "entry" divs. My javascript function doesn't work because a.child is undefined:
$( document ).ready(function() {
$( "#add" ).click(function() {
var elems = $('#container').children('.entry').remove();
elems.sort(function(a,b){
var valueA = parseInt(a.children(".times").text());
var valueB = parseInt(b.children(".times").text());
return (valueA < valueB) ? -1 : (valueA > valueB) ? 1 : 0;
});
$('#container').append(elems);
});
});
Thanks ;)
I finally used a different method. I created the attribute data-sort in the .entry divs and I used this javascript function:
$( document ).ready(function() {
$( "#add" ).click(function() {
var elems = $('#container').children('.entry').remove();
elems.sort(function(a,b){
var a = parseInt($(a).attr("data-sort"));
var b = parseInt($(b).attr("data-sort"));
return (a > b) ? -1 : (a < b) ? 1 : 0;
});
$('#container').append(elems);
});
});
I still don't know how to use a tag value to sort divs but this method actually works.
i bet there shold be an easier way than this. I just wake up
$('#sort').click(function(){
var arr = {};
$.each($('.entry'), function(ii, n){
//console.log(n);
arr[$(this).find('.times').html()] = n;
});
$(arr).sort();
$('.entry').remove();
$.each (arr, function(i, v){
$(v).appendTo('#container');
})
})
jsfiddle.net example
There is a small plugin available here that lets you easily do this like:
$('#sort').click(function() {
$('.entry').sortElements(function(a, b) {
return $(a).find('.times').text() > $(b).find('.times').text() ? 1 : -1;
});
});
#Here's an example using the plugin#
/**
* jQuery.fn.sortElements
* --------------
* #param Function comparator:
* Exactly the same behaviour as [1,2,3].sort(comparator)
*
* #param Function getSortable
* A function that should return the element that is
* to be sorted. The comparator will run on the
* current collection, but you may want the actual
* resulting sort to occur on a parent or another
* associated element.
*
* E.g. $('td').sortElements(comparator, function(){
* return this.parentNode;
* })
*
* The <td>'s parent (<tr>) will be sorted instead
* of the <td> itself.
*/
jQuery.fn.sortElements = (function() {
var sort = [].sort;
return function(comparator, getSortable) {
getSortable = getSortable || function() {
return this;
};
var placements = this.map(function() {
var sortElement = getSortable.call(this),
parentNode = sortElement.parentNode,
// Since the element itself will change position, we have
// to have some way of storing its original position in
// the DOM. The easiest way is to have a 'flag' node:
nextSibling = parentNode.insertBefore(
document.createTextNode(''),
sortElement.nextSibling
);
return function() {
if (parentNode === this) {
throw new Error(
"You can't sort elements if any one is a descendant of another."
);
}
// Insert before flag:
parentNode.insertBefore(this, nextSibling);
// Remove flag:
parentNode.removeChild(nextSibling);
};
});
return sort.call(this, comparator).each(function(i) {
placements[i].call(getSortable.call(this));
});
};
})();
$('#sort').click(function() {
$('.entry').sortElements(function(a, b) {
return $(a).find('.times').text() > $(b).find('.times').text() ? 1 : -1;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<button type="button" id="sort">sort</button>
<div class="entry" id="lala">
<a target="_blank" href="http://lala">lala</a>
<span class="times">4</span>
</div>
<div class="entry" id="lele">
<a target="_blank" href="http://lele.com">lele.com</a>
<span class="times">1</span>
</div>
<div class="entry" id="lolo">
<a target="_blank" href="http://lolo">lolo.com</a>
<span class="times">2</span>
</div>
</div>
I have many DIVs on my page with the same ID
eg:
<div id="myDiv1">
...
</div>
<div id="myDiv2">
...
</div>
<div id="myDiv3">
...
</div>
...
<div id="myDiv20">
...
</div>
...
As You see, the ID property looks almost the same - the only diffrence is that there is a number in each ID.
How to get the count of that DIVs? I thought I can do something like that:
var myDivs= document.getElementById('myDiv');
but returns null
You can do this using jQuery like this:
$('div[id^=myDiv]')
If you can't use jQuery, you'll need to call getElementsByTagName and loop through the values checking the ID property.
var divs = document.getElementsByTagName('div');
var counter = 0;
for(var i in divs) {
if(divs[i].id.indexOf('myDiv') === 0) {
counter++;
}
}
or just
document.querySelectorAll('[id^=myDiv]').length
you can use jquery
//this will give you all divs start with myDiv in the id
var divs = $("div[id^='myDiv']");
From this site:
function getElementsByRegExpId(p_regexp, p_element, p_tagName) {
p_element = p_element === undefined ? document : p_element;
p_tagName = p_tagName === undefined ? '*' : p_tagName;
var v_return = [];
var v_inc = 0;
for(var v_i = 0, v_il = p_element.getElementsByTagName(p_tagName).length; v_i < v_il; v_i++) {
if(p_element.getElementsByTagName(p_tagName).item(v_i).id && p_element.getElementsByTagName(p_tagName).item(v_i).id.match(p_regexp)) {
v_return[v_inc] = p_element.getElementsByTagName(p_tagName).item(v_i);
v_inc++;
}
}
return v_return;
}
Usage:
var v_array = getElementsByRegExpId(/^myDiv[0-9]{1,2}/);