JavaScript. Sorting ements by value of children - javascript

Need a bit of help with JS. I'm trying to figure out how to sort a pile of div's, using values of their children elements. I'v found a solution here on stack and tried to modify it a bit but with no luck so far.
Please, give me some advise. Thank you
The idea is to sort div.person according to their "age" element.
<!DOCTYPE html>
<html>
<head>
<title>Sort list items alphabetically with Javascript</title>
<script type="text/javascript">
function sortUnorderedList(div, sortDescending) {
if(typeof div == "number")
div = document.getElementById(div);
var lis = div.getElementsByClassName("person");
var vals = [];
for(var i = 0, l = lis.length; i < l; i++)
vals.push(lis[i].innerHTML);
vals.sort();
if(sortDescending)
vals.reverse();
for(var i = 0, l = lis.length; i < l; i++)
lis[i].innerHTML = vals[i];
}
window.onload = function() {
var desc = false;
document.getElementById("test").onclick = function() {
sortUnorderedList("list", desc);
desc = !desc;
return false;
}
}
</script>
</head>
<body>
<input type="button" id="test" value="Sort List"/>
<div id="list">
<div class="person">
<div>Jack</div>
<div>Plumber</div>
<div class="info">
<span class="age">24</span>
<span class="hair-color">Blonde</span>
</div>
</div>
<div class="person">
<div>Jill</div>
<div>Actress</div>
<div class="info">
<span class="age">18</span>
<span class="hair-color">Gray</span>
</div>
</div>
<div class="person">
<div>John</div>
<div>Driver</div>
<div class="info">
<span class="age">37</span>
<span class="hair-color">Brown</span>
</div>
</div>
</ul>
</body>
</html>

I changed the code a bit to make it more readable for myself.
First I get all the htmlNode by class name "person", though this will return a htmlCollection which is array-ish but not an array.
Therefore I convert it to an array on the next line so I can perform array-methods on it like 'sort'.
You can swap out the different compareFunctions I wrote for different kind of sorting.
After sorting I empty the existing content of the list-element, and fill it up again with for-loop.
function sortUnorderedList(list, sortDescending) {
var htmlCollection = list.getElementsByClassName("person"),
elements = [].slice.call(htmlCollection); //convert htmlCollection to array
//sort by ...
//elements.sort(compareNames);
//elements.sort(compareJobs);
elements.sort(compareAges);
if (sortDescending) elements.reverse();
list.innerHtml = ''; //remove current contents
for (var i = 0; i < elements.length; i++) {
list.appendChild(elements[i]); //add them again in different order
}
function compareNames(el1, el2) {
//innerText of the first child of each element is the name
if (el1.children[0].innerText < el2.children[0].innerText) return -1;
if (el1.children[0].innerText > el2.children[0].innerText) return 1;
return 0;
}
function compareJobs(el1, el2) {
//innerText of the second child of each element is the job
if (el1.children[1].innerText < el2.children[1].innerText) return -1;
if (el1.children[1].innerText > el2.children[1].innerText) return 1;
return 0;
}
function compareAges(el1, el2) {
var age1 = parseInt(el1.children[2].children[0].innerText),
age2 = parseInt(el2.children[2].children[0].innerText);
if(isNaN(age1))age1=-1;
if(isNaN(age2))age2=-1;
return age1 - age2;
}
}
window.onload = function() {
var desc = false;
document.getElementById("test").onclick = function() {
sortUnorderedList(document.getElementById('list'), desc);
desc = !desc;
return false;
};
};
<!DOCTYPE html>
<html>
<head>
<title>Sort list items alphabetically with Javascript</title>
</head>
<body>
<input type="button" id="test" value="Sort List" />
<div id="list">
<div class="person">
<div>Jack</div>
<div>Plumber</div>
<div class="info">
<span class="age">24</span>
<span class="hair-color">Blonde</span>
</div>
</div>
<div class="person">
<div>Jill</div>
<div>Actress</div>
<div class="info">
<span class="age">0</span>
<span class="hair-color">Gray</span>
</div>
</div>
<div class="person">
<div>John</div>
<div>Driver</div>
<div class="info">
<span class="age"></span>
<span class="hair-color">Brown</span>
</div>
</div>
</ul>
</body>
</html>

Related

Add an existing div element with classes (along with its underlying elements) to a div

I need to have a function that would add an existing div with a class (along with its underlying elements) to a particular div using for loop. It looks like this:
<div class="left-col">
<div class="list-row">
<div class="list-row2">
<span>Hello</span>
</div>
</div>
</div>
I need to loop through a function that will produce or duplicate "list-row" twice.
$(function() {
var leftcol = document.getElementsByClassName('left-col');
for (var i = 0; i < 2; i++) {
var listrow = document.querySelector('.list-row');
leftcol.appendChild(listrow[i]);
}
})
It should look like this:
<div class="left-col">
<div class="list-row">
<div class="list-row2">
<span>Hello</span>
</div>
</div>
<div class="list-row">
<div class="list-row2">
<span>Hello</span>
</div>
</div>
<div class="list-row">
<div class="list-row2">
<span>Hello</span>
</div>
</div>
</div>
You can try the following way:
$(function() {
var leftcol = document.querySelector('.left-col');
for (let i = 0; i < 2; i++) {
var listrow = document.querySelector('.list-row').cloneNode();
listrow.textContent = i + 1 + listrow.textContent;
leftcol.appendChild(listrow);
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="left-col">
<div class="list-row">0</div>
</div>
You could use cloneNode and set the deep property to true. This will clone the node and all of its descendants.
For example:
function cloneNode(copies = 1) {
for (let i = 0; i < copies; i++) {
let leftcol = document.getElementsByClassName('left-col')[0];
let nodeToClone = document.querySelector(".list-row");
let clonedNode = nodeToClone.cloneNode(true);
leftcol.appendChild(clonedNode);
}
}
clone.addEventListener("click", function() {
cloneNode();
});
<button id="clone" type="button">Clone Node</button>
<div class="left-col">
<div class="list-row">Test</div>
</div>
If you wanted to insert more than one copy, you could pass a different value to the cloneNode function.
You can use jQuery's .clone() method to copy the entire content of an element to another element. The boolean argument passed to the clone function determines whether the events associated with the cloned element has to be copied or not. true indicates all the events associated with that div has to be copied.
$(function() {
$('.list-row').each(function(){
$(".left-col").append($(this).clone(true));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="left-col">
<div class="list-row"><h1>This is original row</h1></div>
</div>
$(function() {
var leftcol = document.getElementsByClassName('left-col');
var listrow = document.querySelector('.list-row');
for (var i = 0; i < 2; i++) {
leftcol.appendChild(listrow.clone(true));
}
})

get multiple element li with javascript

What I need to get all value of multiple li from the HTML code.
<div class="row">
<div style="margin-left:11px">
<strong>Detail Product</strong>
</div>
<div class="col-sm-12">
<ul class="item-highlights">
<li>4G LTE</li>
<li>Dual Sim</li>
<li>RAM 1GB</li>
</ul>
</div>
<div class="col-sm-12">
<ul class="item-highlights">
<li>ROM 8GB</li>
<li>Screen 5.5</li>
<li>Warranty 1 Year</li>
</ul>
</div>
This how i get with javascript:
var test = document.getElementById('block-system-main').getElementsByClassName('item-highlights item-highlights')[0].innerHTML;
and i get the answer:
<li>4G LTE</li><li>Dual Sim</li><li>RAM 1GB</li>
Heres an easy to understand answer.
var items = document.querySelectorAll( ".item-highlights li");
var values = [];
for( var n = 0; n < items.length; n++)
values.push( items[n].innerHTML);
If you know css then its simple to change the call to "querySelectorAll" as it is only comparing things through the same way css does, So you can change it however you like.
Expanding on #Tushar comment:
var test = '';
[].forEach.call( document.querySelectorAll('#block-system-main .item-highlights'), function(item) { return test += item.innerText; })
Check demo - Fiddle.
You should be able to select every li using querySelectorAll and then map those values. It would look like this:
var listItems = Array.prototype.slice.call(document.querySelectorAll('li'));
var vals = listItems.map(function (item) {
return item.innerHTML;
});
Example:
http://jsbin.com/zumewidoyo/edit?html,js,console
If you want to select every li element you can do something like this:
Live Preview
HTML
<div class="row">
<div style="margin-left:11px">
<strong>Detail Product</strong>
</div>
<div class="col-sm-12">
<ul class="item-highlights">
<li>4G LTE</li>
<li>Dual Sim</li>
<li>RAM 1GB</li>
</ul>
</div>
<div class="col-sm-12">
<ul class="item-highlights">
<li>ROM 8GB</li>
<li>Screen 5.5</li>
<li>Warranty 1 Year</li>
</ul>
</div>
JavaScript
//store the list elements
var lists = document.getElementsByTagName('li');
//array to hold the li elements
var liElements = [];
//loop through the lists
for (var i = 0; i < lists.length; i++) {
//add the li element values to the array
liElements.push(lists[i].innerHTML);
}
//show the results
alert(liElements.join("\n"));
The function getElementsByClassName return an array. Just iterate over it instead of using the "[0]" to get only the first element.
function getValue() {
var test = document.getElementById('block-system-main').getElementsByClassName('item-highlights');
var array = [];
for (var i = 0; i < test.length; i++) {
var liList = test[i].getElementsByTagName('li');
for (var j = 0; j < liList.length; j++)
array.push(liList[j].innerHTML);
}
return array;
}
alert(getValue());
<div id="block-system-main">
<div class="row">
<div style="margin-left:11px">
<strong>Detail Product</strong>
</div>
<div class="col-sm-12">
<ul class="item-highlights">
<li>4G LTE</li>
<li>Dual Sim</li>
<li>RAM 1GB</li>
</ul>
</div>
<div class="col-sm-12">
<ul class="item-highlights">
<li>ROM 8GB</li>
<li>Screen 5.5</li>
<li>Warranty 1 Year</li>
</ul>
</div>
</div>
</div>

how to use for loop to cycle through lists of elements and set an elements style dynamically?

I have implemented a for loop to highlight the colour widget choices upon clicking one, however would like to only highlight the one that is clicked, the rest being without any border highlight. How would i go about this with just slight alterations to my code below? It is imperative to implement a for loop and pure javascript.
<html>
<head>
<meta charset="utf8" />
<title></title>
<script>
function changeColor(e) {
document.getElementById("page").className = e;
var i;
var x = document.getElementById("page");
for (i = 0; i < 5; i++)
if (document.getElementById("page").className = e ){
x.getElementsByTagName("li")[i].style.borderColor = "red";
}
}
</script>
</head>
<body>
<div id="page" class=""><!-- start page wrapper -->
<hr />
<div id="theme-picker">
<h2>Theme Picker</h2>
<p>Select a theme from the options below:</p>
<div id="palette">
<ul>
<li class="midnight" onClick="changeColor('midnight')">Midnight</li>
<li class="matrix" onclick="changeColor('matrix')">Matrix</li>
<li class="peardrop" onclick="changeColor('peardrop')">Peardrop</li>
<li class="skylight" onclick="changeColor('skylight')">Skylight</li>
<li class="sunset" onclick="changeColor('sunset')">Sunset</li>
</ul>
<div class="clearfix"></div>
<hr />
</div><!-- /page -->
</body>
</html>
Change the loop to this:
var i;
var x = document.getElementById("palette");
var items = x.getElementsByTagName("li");
for (i = 0; i < items.length; i++){
var item = items[i];
item.style.borderColor = item.className == e ? "red" : "";
}

Apply complicated li to descending order with jQuery

in the demo below, it orders li's according to text.
http://codepen.io/anon/pen/ByERqd
<abbr id="arti173" class="butarti">8</abbr>
I want to order li's according to the text in abbr.
I really appreciate your help.
I've been working on it lately and am stuck.
html
<body>
<input type="button" id="test" value="Sort List (click again to reverse)" />
<ul id="list">
<li>Peter<div class="yordivu">
<div>
<img>
</div>
<div> <button id="likefuncid173" class="likebutx mybutton" onclick="likefunc(173,1,'abbr#arti173')"><abbr id="arti173" class="butarti">6</abbr><span class="fa fa-thumbs-up"></span></button><button id="unlikefuncid173" class="mybutton" onclick="unlikefunc(173,1,'abbr#eksi173')"><abbr id="eksi173" class="buteksi">2</abbr><span class="fa fa-thumbs-down"></span></button>
</div>
</div>
<div style="word-wrap: break-word;">
<div><h3 class="yornameh"></h3><span class="text-muted"><strong></strong></span></div>
<div class="yortext">
</div>
</div></li>
<li>Mary<div class="yordivu">
<div>
<img>
</div>
<div> <button id="likefuncid173" class="likebutx mybutton" onclick="likefunc(173,1,'abbr#arti173')"><abbr id="arti173" class="butarti">8</abbr><span class="fa fa-thumbs-up"></span></button><button id="unlikefuncid173" class="mybutton" onclick="unlikefunc(173,1,'abbr#eksi173')"><abbr id="eksi173" class="buteksi">3</abbr><span class="fa fa-thumbs-down"></span></button>
</div>
</div>
<div style="word-wrap: break-word;">
<div><h3 class="yornameh"></h3><span class="text-muted"><strong></strong></span></div>
<div class="yortext">
</div>
</div></li>
<li>Paul<div class="yordivu">
<div>
<img>
</div>
<div> <button id="likefuncid173" class="likebutx mybutton" onclick="likefunc(173,1,'abbr#arti173')"><abbr id="arti173" class="butarti">5</abbr><span class="fa fa-thumbs-up"></span></button><button id="unlikefuncid173" class="mybutton" onclick="unlikefunc(173,1,'abbr#eksi173')"><abbr id="eksi173" class="buteksi">0</abbr><span class="fa fa-thumbs-down"></span></button>
</div>
</div>
<div style="word-wrap: break-word;">
<div><h3 class="yornameh"></h3><span class="text-muted"><strong></strong></span></div>
<div class="yortext">
</div>
</div></li>
<li>Allen<div class="yordivu">
<div>
<img>
</div>
<div> <button id="likefuncid173" class="likebutx mybutton" onclick="likefunc(173,1,'abbr#arti173')"><abbr id="arti173" class="butarti">1</abbr><span class="fa fa-thumbs-up"></span></button><button id="unlikefuncid173" class="mybutton" onclick="unlikefunc(173,1,'abbr#eksi173')"><abbr id="eksi173" class="buteksi">10</abbr><span class="fa fa-thumbs-down"></span></button>
</div>
</div>
<div style="word-wrap: break-word;">
<div><h3 class="yornameh"></h3><span class="text-muted"><strong></strong></span></div>
<div class="yortext">
</div>
</div></li>
</ul>
</body>
javascript
function sortUnorderedList(ul, sortDescending) {
if (typeof ul == "string") ul = document.getElementById(ul);
var lis = ul.getElementsByTagName("LI");
var vals = [];
for (var i = 0, l = lis.length; i < l; i++)
vals.push(lis[i].innerHTML);
vals.sort();
if (sortDescending) vals.reverse();
for (var i = 0, l = lis.length; i < l; i++)
lis[i].innerHTML = vals[i];
}
window.onload = function() {
var desc = false;
document.getElementById("test").onclick = function() {
sortUnorderedList("list", desc);
desc = !desc;
return false;
}
}
First of all, there should not be more than one id value in a document. Any kind of querying on that will fail then.
Coming to your issue, you can insert the text inside abbr in your array to be sorted along with li and then sort based on the text. Keeping that in mind, change your code to this -
for (var i = 0, l = lis.length; i < l; i++)
{
// pushing an array with text as second field
vals.push([lis[i].innerHTML, lis[i].getElementsByClassName("butarti")[0].innerHTML]);
}
// sorting the final based on text
vals.sort(function(a,b){return parseInt(a[1]) - parseInt(b[1])});
if (sortDescending) vals.reverse();
// replacing the existing li tags html
for (var i = 0, l = lis.length; i < l; i++)
lis[i].innerHTML = vals[i][0];
Hope this works.

JQuery Sort Divs by child divs

I have the following list of divs and I'd like to be able to sort them using Javascript / JQuery.
<div class="item">
<div class="genre">Classical</div>
<div class="name">Alpha</div>
<div class="location">London</div>
</div>
<div class="item">
<div class="genre">Blues</div>
<div class="name">Bravo</div>
<div class="location">New York</div>
</div>
<div class="item">
<div class="genre">Pop</div>
<div class="name">Charlie</div>
<div class="location">Paris</div>
</div>
<div class="buttons">
Sort by Genre
Sort by Name
Sort by Location
</div>
I'd like to be able to sort the items by their Genre/Name/Location alphabetically.
Example: If Sort by Genre was clicked, it would sort the items in 0-9 A-Z by Genre.
If any of you have any tips it would greatly be appreciated.
Cheers :)
You have to make a little change to html like following:
<div id="container">
<div class="item">
<div class="genre">Classical</div>
<div class="name">Alpha</div>
<div class="location">London</div>
</div>
<div class="item">
<div class="genre">Blues</div>
<div class="name">Bravo</div>
<div class="location">New York</div>
</div>
<div class="item">
<div class="genre">Pop</div>
<div class="name">Charlie</div>
<div class="location">Paris</div>
</div>
</div>
<div class="buttons">
Sort by Genre
Sort by Name
Sort by Location
</div>
jQuery
function sorting(tag) {
var items = $('div.item').sort(function(a, b) {
var txt1 = $.trim($('div.' + tag, a).text()),
txt2 = $.trim($('div.' + tag, b).text());
if (txt1 > txt2) return 1;
else return -1;
});
return items;
}
$('.buttons a').on('click', function(e) {
e.preventDefault();
$('div#container').html(sorting(this.id));
});
Working Sample
Ok, this would be my pure JS solution.
First, we should wrap your <div>s into a larger container.
<div id = "wrapper">
<div id = "item">...</div>
<div id = "item">...</div>
<div id = "item">...</div>
</div>
Now, let's define a constant - which property do you want to sort it by? (this will probably be a function parameter later in your code).
var propName = "genre";
Let's get all the <div>s and put them in an array.
var items = document.getElementsByClassName("item");
var itemsArray = new Array();
Let us sort them lexicographically according to the text of the selected property.
for (var i = 0; i < items.length; i++)
itemsArray.push(items[i]);
itemsArray.sort(function(a, b) {
var aProp = a.getElementsByClassName(propName)[0].firstChild.nodeValue;
var bProp = b.getElementsByClassName(propName)[0] .firstChild.nodeValue;
if (aProp < bProp)
return -1;
else if (aProp > bProp)
return 1;
else
return 0;
});
Let us construct a document fragment consisting of the sorted <div>s.
var fragment = document.createDocumentFragment();
for (var i = 0; i < itemsArray.length; i++)
fragment.appendChild(itemsArray[i].clone());
Finally, let us clear the contents of the <div id = "wrapper"> and replace it with the document fragment.
document.getElementById('wrapper').innerHTML = '';
document.getElementById('wrapper').appendChild(fragment);
Also, note that document.getElementsByClassName does not work in IE<9, but I was now really lazy to cope with that issue.
A fiddle: http://jsfiddle.net/nNXr4/
Check this beast:
function sortByCreatedOnAsc(a,b){
return $(a).find('.created_on').text() > $(b).find('.created_on').text();
}
function sortByCreatedOnDesc(a,b){
return $(a).find('.created_on').text() < $(b).find('.created_on').text();
}
function reorderEl(el){
var container = $('#tasks');
container.html('');
el.each(function(){
$(this).appendTo(container);
});
}
$('#created_on').click(function(){
if($(this).hasClass("asc")){
reorderEl($('.task').sort(sortByCreatedOnDesc));
$(this).removeClass("asc");
$(this).addClass("desc");
} else {
reorderEl($('.task').sort(sortByCreatedOnAsc));
$(this).removeClass("desc");
$(this).addClass("asc");
}
return false;
});
jsfiddle: http://jsfiddle.net/jKJc3/116/

Categories