We Keep Coding

Menu nav li active remove

I want to assign "active" class to the menu. The active clip is throwing but not deleting. I do not understand why you did not delete. Thank you in advance to those who can help.
There is no error, it surprises me that it does not delete this way
<ul id="avia-menu" class="menu av-main-nav">
<li id="menu-item" class="menu-item">
<a href="home">
<span class="avia-bullet"></span>
<span class="avia-menu-text">Home</span>
<span class="avia-menu-fx">
<span class="avia-arrow-wrap">
<span class="avia-arrow"></span>
</span>
</span>
</a>
</li>
<li id="menu-item" class="menu-item">
<a href="about">
<span class="avia-bullet"></span>
<span class="avia-menu-text">About</span>
<span class="avia-menu-fx">
<span class="avia-arrow-wrap">
<span class="avia-arrow"></span>
</span>
</span>
</a>
</li>
<li id="menu-item" class="menu-item">
<a href="contact">
<span class="avia-bullet"></span>
<span class="avia-menu-text">Contact</span>
<span class="avia-menu-fx">
<span class="avia-arrow-wrap">
<span class="avia-arrow"></span>
</span>
</span>
</a>
</li>
</ul>
function updateMenu(url) {
const active = document.querySelector('#menu-item.active');
if (active !== null) {
active.classList.remove('active');
}
const links = Array.from(document.querySelectorAll('#menu-item'));
links.forEach(function (li) {
let anchor = li.querySelector("a");
if (url.indexOf(anchor.href) > -1) {
li.classList.add("active");
}
});
}
updateMenu(window.location.href);

You can simplify your function by consolidating your .add("active") and .remove("active") calls inside your loop. This saves you a query and avoids unsetting and resetting a class on the same element unnecessarily.
You also don't need the Array.from() call.
function updateMenu(url) {
const links = document.querySelectorAll('#menu-item');
links.forEach(li => {
let anchor = li.querySelector("a");
if (url.indexOf(anchor.href) > -1) {
li.classList.add("active");
} else {
li.classList.remove("active");
}
});
}
updateMenu(window.location.href);

Swap "ul li" dynamically

I have my ul : li list with a span named as badge which contains the total number of unread messages. So i want to shuffle all the li items with the highest number on top of the list and lowest or none to the last. I tried many solutions but still can`t get it. Another point is the count gets update live so the list should also shuffle live. Here is the code that i tried till now.
My HTML Code
<li>
<span class="badge" style="display:none" id="61_T">0</span>
</li>
<li>
<span class="badge" style="display:none" id="62_T">5</span>
</li>
<li>
<span class="badge" style="display:none" id="63_T">10</span>
</li>
<li>
<span class="badge" style="display:none" id="64_T">0</span>
</li>
Here is my JS Code
var prev_index = 0;
var curr_index = 0;
var curr_val = 0;
var prev_val = 0;
var lists = $('#items li');
var msg_count = [];
$('#items li').each(function(){
var current_index = $(this).index();
var count = $(this).find('.badge').text();
msg_count.push([current_index,count]);
});
updateli();
function updateli(){
$.each(msg_count,function(key,value){
var str = value.join('-');
var sep = str.split('-');
curr_index = sep[0];
curr_val = parseInt(sep[1]);
if(curr_val > prev_val){
$("#items li:eq("+curr_index+")").siblings().eq(curr_index).after(lists.siblings(':eq('+prev_index+')'));
}
prev_index = curr_index;
prev_val = curr_val;
});
}
What i did here is created an array with li index and unread count number. After than looped the array and used jQuery function to swap the elements but nothing seems to work. Any help will really appreciated. Thanks in advance.

This sorts the list without using JQuery
function sortItems(containerSelector, itemSelector, countSelector, asc) {
let container = document.querySelector(containerSelector);
let items = [].slice.call(container.querySelectorAll(itemSelector));
items.sort(function(currItem, nextItem) {
var currCountElement = currItem.querySelector(countSelector);
var nextCountElement = nextItem.querySelector(countSelector);
if(!currCountElement) return 1;
if(!nextCountElement) return -1;
var currCount = parseInt(currCountElement.textContent || -1);
var nextCount = parseInt(nextCountElement.textContent || -1);
var order = currCount - nextCount;
return asc?-order:order;
});
items.forEach(function(item) { container.appendChild(item)});
}
// demo code
[].slice.call(document.querySelectorAll('.sortButton')).forEach(function(button) {
button.addEventListener('click', function(e) { sortItems('.items', 'li', '.badge', this.classList.contains('-desc')) });
});
<ul class="items">
<li>
2
<span class="badge" style="display:none" id="61_T">2</span>
</li>
<li>
5
<span class="badge" style="display:none" id="62_T">5</span>
</li>
<li>
10
<span class="badge" style="display:none" id="63_T">10</span>
</li>
<li>
1
<span class="badge" style="display:none" id="63_T">1</span>
</li>
<li>
0
<span class="badge" style="display:none" id="64_T">0</span>
</li>
<li>
none
<span class="badge" style="display:none" id="64_T"></span>
</li>
<li>
no badge
</li>
</ul>
<button class="sortButton">asc</button>
<button class="sortButton -desc">desc</button>
Edit: made it a method

try the code below please.jquery return a array-like object so you can sort elements by sort(..) method,and then replace all the li.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<span class="badge" id="61_T">0</span>
</li>
<li>
<span class="badge" id="62_T">5</span>
</li>
<li>
<span class="badge" id="63_T">10</span>
</li>
<li>
<span class="badge" id="64_T">0</span>
</li>
</ul>
<script>
var badges = $('.badge').parent().sort(function (a, b) {
return parseInt($(b).find('span').text()) - parseInt($(a).find('span').text());
});
badges.closest('ul').empty().append(badges);
</script>

How to get the active class value?

I have three links (anchor tag) that represent standards like std1, std2. I want to get the active class value.
<li data-interest="1" class="check <? if($std_id == 1){?> class="active"<?}?>" >
<a href="#1" onclick="changeDiv('1','S1')" data-toggle="tab" title="S1">
<span class="round-tabs green">
<span class="grade_catgory">S1</span>
</span>
</a></li>
<li data-interest="2" class="check <? if($std_id == 2){?> class="active"<?}?>" >
<a onclick="changeDiv('2','S2')" data-toggle="tab" title="S2">
<span class="round-tabs yellow">
<span class="grade_catgory">S2</span>
</span>
</a>
</li>
jQuery
$(function() {
// var val = $('ul#myTab1').find('li.active').data('interest');
var itemType = $('ul#myTab1').find('li.check').data('interest');
alert(itemType);
});
I want the value like 1, 2, etc. Where can I put this?

Try this:
$("li").each(function(){ // loop through all li
if($(this).hasClass("active")) { // check if li has active class
console.log($(this).data("interest")) // get the value of data-interest attribute
}
})

Try this :
var val = $('body').find('li.active').attr('data-interest');

Sorting a list by data-attribute

I have a list of people with job titles sorted by the persons’ first names, like this:
<ul>
<li data-azsort="smithjohn">
<a href="#">
<span class="list-name">John Smith</span>
</a>
<span class="list-desc">Professor</span>
</li>
..
<li data-azsort="barnestom">
<a href="#">
<span class="list-name">Tom Barnes</span>
</a>
<span class="list-desc">Lecturer</span>
</li>
</ul>
I’ve added the data-azsort attribute to the <li> element, and I’d like to pop these list elements into an array, and sort based on that data-* attribute (using plain JavaScript).
What would be the best way to sort the list by data-azsort (A-Z), returning the same code? JavaScript only, no jQuery, etc.

This works for any number of lists: it basically gathers all lis in uls that have your attribute, sorts them according to their data-* attribute value and re-appends them to their parent.
Array.from(document.querySelectorAll("ul > li[data-azsort]"))
.sort(({dataset: {azsort: a}}, {dataset: {azsort: b}}) => a.localeCompare(b)) // To reverse it, use `b.localeCompare(a)`.
.forEach((item) => item.parentNode.appendChild(item));
<ul>
<li data-azsort="skeetjon">
<span class="list-name">Jon Skeet</span>
<span class="list-desc">Stack Overflow user</span>
</li>
<li data-azsort="smithjohn">
<span class="list-name">John Smith</span>
<span class="list-desc">Professor</span>
</li>
<li data-azsort="barnestom">
<span class="list-name">Tom Barnes</span>
<span class="list-desc">Lecturer</span>
</li>
</ul>
<ul>
<li data-azsort="smithjohn">
<span class="list-name">John Smith</span>
<span class="list-desc">Professor</span>
</li>
<li data-azsort="barnestom">
<span class="list-name">Tom Barnes</span>
<span class="list-desc">Lecturer</span>
</li>
<li data-azsort="skeetjon">
<span class="list-name">Jon Skeet</span>
<span class="list-desc">Stack Overflow user</span>
</li>
</ul>
The funny thing is, it gets all lis in the same array, sorts them all, but in the end figures out which list the li originally belonged to. It’s a pretty simple and straight-forward solution.
If you want to sort elements by a numeric data attribute, then use this sort function instead:
// Presumably, the data-* attribute won’t be called `azsort`. Let’s call it `numsort`.
({dataset: {numsort: a}}, {dataset: {numsort: b}}) => Number(a) - Number(b) // `Number(b) - Number(a)` to reverse the sort.
A slightly longer ECMAScript 5.1 alternative would be:
Array.prototype.slice.call(document.querySelectorAll("ul > li[data-azsort]")).sort(function(a, b) {
a = a.getAttribute("data-azsort");
b = b.getAttribute("data-azsort");
return a.localeCompare(b);
}).forEach(function(node) {
node.parentNode.appendChild(node);
});

What about getting all of the list items, push them into array which later will be sorted?
var allListElements = document.getElementById("staff").getElementsByTagName("li");
var staff = new Array();
for (i = 0; i < allListElements.length; i++) {
staff.push(allListElements[i].getAttribute('data-azsort'));
}
staff.sort(function(a, b) {
if (a < b) return -1;
if (a > b) return 1;
return 0;
});
//Print
document.write('<h4>Sorted</h4>');
for (i = 0; i < staff.length; i++) {
document.write(staff[i] + "<br />");
}
<h4>Input</h4>
<ul id="staff">
<li data-azsort="smithjohn">
<a href="#">
<span class="list-name">John Smith</span>
</a>
<span class="list-desc">Professor</span>
</li>
<li data-azsort="barnestom">
<a href="#">
<span class="list-name">Tom Barnes</span>
</a>
<span class="list-desc">Lecturer</span>
</li>
</ul>
Additionally you can save the index of <li> and reorder the <ul>.

You can pass a comparison function to Array.prototype.sort
you should be able to do something like
$items = $('li[data-azsort]');
var compareElem = function (a, b) {
if (a.attr('data-azsort') > b.attr('data-azsort') {
return 1;
} else {
return -1
}
};
Array.prototype.sort.apply($items, compareElem);

jQuery Higlight items that are more than one in ul

I am trying to highlight items that are more than one in a list with different colours with jQuery. Is below achievable easily?
For example. Take the ul below
<ul id="inul">
<li id="s0" class="list">
<span id="ip0">127.0.0.1</span>
<span id="ua0">SonyEricssonK800iv/R1KG Browser/NetFront/3.3 Profile/MIDP-2.0 Configuration/CLDC-1.1</span>
</li>
<li id="s1" class="list">
<span id="ip1">127.0.0.1</span>
<span id="ua1">Nokia3120classic/2.0 (09.41) Profile/MIDP-2.1 Configuration/CLDC-1.1 nokia3120classic/UC Browser7.6.1.82/69/352 UNTRUSTED/1.0</span>
</li>
<li id="s2" class="list">
<span id="ip2">127.0.0.1</span>
<span id="ua2">SonyEricssonW580i/R8BE Browser/NetFront/3.3 Profile/MIDP-2.0 Configuration/CLDC-1.1</span>
</li>
<li id="s3" class="list">
<span id="ip3">127.0.0.1</span>
<span id="ua3">SonyEricssonK800iv/R1KG Browser/NetFront/3.3 Profile/MIDP-2.0 Configuration/CLDC-1.1</span>
</li>
<li id="s4" class="list">
<span id="ip4">127.0.0.1</span>
<span id="ua4">Nokia3120classic/2.0 (09.41) Profile/MIDP-2.1 Configuration/CLDC-1.1 nokia3120classic/UC Browser7.6.1.82/69/352 UNTRUSTED/1.0</span>
</li>
<li id="s5" class="list">
<span id="ip5">127.0.0.2</span>
<span id="ua5">SonyEricssonW580i/R8BE Browser/NetFront/3.3 Profile/MIDP-2.0 Configuration/CLDC-1.1</span>
</li>
</ul>
There are two of each browser user agent and 4 of same ip (127.0.0.1) and 1 127.0.0.2.
What i am hoping to achieve is that identical spans would be colored with same color while assigning different color to each identical set.
Just to be clear, end result should look like image below
UPDATE With the help of WSkid I ahve manged to achive what i want. See update http://pastebin.ca/2058058 or working version at http://jsfiddle.net/mUGVR/15/

The following is terribly in efficient and hacky, but it might start you down the right road of storing a hash-like map and keeping a count to add your needed styles:
Working fiddle http://jsfiddle.net/mUGVR/.
var ipList={};
var ipCount=0;
var userList={};
var userCount=0;
$('li.list').each(function(i){
var spans = $(this).children();
spans[0] = $(spans[0]);
spans[1] = $(spans[1]);
if(ipList[spans[0].text()]!=null)
{
spans[0].addClass('ip'+ipList[spans[0].text()]);
}
else
{
ipList[spans[0].text()] = ipCount;
spans[0].addClass('ip'+ipCount);
ipCount++;
}
if(userList[spans[1].text()]!=null)
{
spans[1].addClass('user'+userList[spans[1].text()]);
}
else
{
userList[spans[1].text()] = userCount;
spans[1].addClass('user'+userCount);
userCount++;
}
});
With css:
.ip0 {background:yellow;}
.user0{background:cyan;}
.user1{background:green;}
.user2{background:red;}

Like this? Fiddle: http://jsfiddle.net/8A5dY/1
// highlights ips
$('li span:first-child').filter(function() {
return ($(this).text() == '127.0.0.1');
}).css('background', 'yellow');
var colorMap = [];
var currentColor = 0;
$('li span:nth-child(2)').each(function() {
var text = $(this).text();
var color = colorMap[text] ||
['lightblue', 'red', 'blue', 'green'][currentColor++];
colorMap[text] = color;
$(this).css('background', color);
});