We Keep Coding

Move li element with javascript

I would like to move a li element after a list of li with the same class, is that possible?
$("li#anonymous_element_2").insertAfter("li.amscheckout-row:last");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="amscheckout-row"> </li>
<li class="amscheckout-row"> </li>
<li class="amscheckout-row"> </li>
<li class="fields" id="anonymous_element_2"> </li>
<li class="amscheckout-row"> </li>
<li class="amscheckout-row"> </li>
<li class="amscheckout-row"> </li>
<li class="amscheckout-row"> </li>

jQuery has a built in last() function:
var elementToMove = $('#anonymous_element_2');
var targetPosition = $('.amscheckout-row').last();
elementToMove.insertAfter(targetPosition);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="amscheckout-row">1</li>
<li class="amscheckout-row">2</li>
<li class="amscheckout-row">3</li>
<li class="fields" id="anonymous_element_2">4</li>
<li class="amscheckout-row">5</li>
<li class="amscheckout-row">6</li>
<li class="amscheckout-row">7</li>
<li class="amscheckout-row">8</li>

Yes you can!
The method that should fit your requirements is: after.
If I understand you want to "move" and, to do that, you have to "remove/add" the element into the list of values.
I suggest you to try this code:
var $liToAppend = $('li#anonymous_element_2');
var $lastLi = $('ul li:last'); // I suppose you are using the root tag UL!
// The final solution:
$liToAppend.remove();
$lastLi.after($liToAppend);
With jQuery you can to this in lot of ways:
$('li#anonymous_element_2').remove().appendTo('ul');
Should work too!

Try This
<script>
$("<li>Hello world!</li>").insertAfter(".amscheckout-row:last")
</script>

How can i remove the text decoration from a list item wrapped in an <a> tag, using a query selector?

I want to remove the textDecoration from a special item using a javascript ( preferably a query selector. I don't know what I'm doing wrong though. Here's the code. CodePen
<h1>Thanks for the Help!</h1>
<h1> My problem set </h1>
<ul>
<li id="highlight">List Item 1</li>
<li class="bolded">List Item 2</li>
<li class="bolded">List Item 3</li>
</ul>
var sLi = document.querySelector("ul a.special");
for (var i = 0; i <= sLi.length; i++){
sLi[i].style.textDecoration = "none";
}

There is no need to loop over your query result since querySelector() only returns one item.
Had you been using querySelectorAll(), you would want the loop as that returns a node list.
var sLi = document.querySelector("ul a.special");
sLi.style.textDecoration = "none";
<h1>Thanks for the Help!</h1>
<h1> My problem set </h1>
<ul>
<li id="highlight">List Item 1</li>
<li class="bolded">List Item 2</li>
<li class="bolded">List Item 3</li>
</ul>
Also (FYI), the li should contain the a and not the other way around.

How to sort list items based on id attribute using jquery?

Hello so I have this problem, I use magento and my I can't find a place how to switch my tabs in position so I thought JQuery could come in hand. So this is what i have as an example
<li id="tab-4">
<li id="tab-3">
<li id="tab-2">
<li id="tab-1">
And i need to make it
<li id="tab-1">
<li id="tab-2">
<li id="tab-3">
<li id="tab-4">
Is there a fast way to do it? Or I have to do it one by one?

I guess you have an <ul> around you <li>
ul = $('ul'); // your parent ul element
ul.children().each(function(_,li){ul.prepend(li)})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li id="tab-4">4</li>
<li id="tab-3">3</li>
<li id="tab-2">2</li>
<li id="tab-1">1</li>
</ul>

Pure JS solution.
var a = document.getElementsByTagName('li');
var b = document.getElementById('list');
var arr = [];
Array.from(a).forEach(v => arr.push(v));
arr.reverse().forEach(v => b.append(v));
<ul id='list'>
<li id="tab-4">4</li>
<li id="tab-3">3</li>
<li id="tab-2">2</li>
<li id="tab-1">1</li>
</ul>

Also, for a sollution working (actually sorting) regardless of the initial order you can use sort() and append like this:
$("ul li").sort(function(a,b){
if(a.id.substring(4, 5) < b.id.substring(4, 5)) {
return -1;
} else {
return 1;
}
}).each(function() { $('ul').append(this);});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li id="tab-4">4</li>
<li id="tab-1">1</li>
<li id="tab-3">3</li>
<li id="tab-2">2</li>
</ul>

$(".list > li").detach().sort(function(a, b) {
return +a.id.replace("tab-","") - b.id.replace("tab-","") ;
}).appendTo("ul.list");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list">
<li id="tab-3">3
<li id="tab-4">4
<li id="tab-2">2
<li id="tab-1">1
</ul>
If your HTML code like this you can write your code using detach and a single appendTo like this.
More about detach(): https://www.w3schools.com/jquery/html_detach.asp

For each list, count the total number of elements with matching class

I've spent a lot of time trying to figure this one out and researching for an answer, but none of the answers I've found take into consideration counting each list. I need something that can count the total number of elements with class "link" inside each element with class "nav". I need that number stored as a variable so I can to add a new class to the "nav" elements depending on range qualifiers.
<ul class="nav">
<li class="link"></li>
<li class="link"></li>
<li class="link"></li>
<li class="link">
<ul class="subnav">
<li class="link"></li>
<li class="link"></li>
<li class="link"></li>
<li class="link"></li>
<li class="link"></li>
</ul>
</li>
</ul>
<ul class="nav">
<li class="link"></li>
<li class="link"></li>
<li class="link">
<ul class="subnav">
<li class="link"></li>
<li class="link"></li>
<li class="link"></li>
</ul>
</li>
<li class="link">
<ul class="subnav">
<li class="link"></li>
<li class="link"></li>
</ul>
</li>
</ul>
Any help is greatly appreciated!

You can use this code to count the number of elements with class link inside each element with class nav:
$(document).ready(function(){
$('body').find('.nav').each(function(){
sum = 0;
$(this).find('.link').each(function(){
sum=sum+1;
});
console.log(sum);
});
});

You can do something like this:
var items = $.map( $(".nav"), function(navEl) {
return [navEl, navEl.find(".link").length];
});
console.log( items );
I'm using jQuery.map() to construct a new array based on the .nav elements - each element in the constructed array is array by its own: the first index is the jQuery object, and the second is the count of its children's .link elements.

After some more digging around this morning (and before loading StackOverflow), I was finally able to develop this answer:
$('.nav').each(function(){
var numLinks = $(this).find('.link').length;
if (numLinks > 40) {
$(this).addClass('mm-5-cols');
} else if (numLinks > 30 && numLinks <= 40) {
$(this).addClass('mm-4-cols');
} else if (numLinks > 20 && numLinks <= 30) {
$(this).addClass('mm-3-cols');
} else if (numLinks > 10 && numLinks <= 20) {
$(this).addClass('mm-2-cols');
} else if (numLinks <= 10) {
$(this).addClass('mm-1-col');
}
});
(Apologies if the solution code is slightly off. I modified it from my actual code to match my example code.)
Thanks to those that answered with their own code!

Nested lists and tinysort

I'm currently searching for a solution for sorting a nested list with Tinysort.js
My HTML
<ul class="speechlev1">
<li data-title="indo-european" data-ratio="48">Indo-European
<ul class="speechlev2">
<li data-title="albanian" data-ratio="100">Albanian</li>
<li data-title="armenian" data-ratio="75">Armenian</li>
<li data-title="balto-slavic" data-ratio="75">Balto-Slavic</li>
<li data-title="celtic" data-ratio="34">Celtic</li>
<li data-title="germanic" data-ratio="78">Germanic</li>
<li data-title="greek-phrygian" data-ratio="23">Greek-Phrygian</li>
<li data-title="tokharian" data-ratio="0">Tokharian</li>
</ul>
</li>
<li data-title="nilo-saharan" data-ratio="43">Nilo-Saharan</li>
<li ata-title="sepik" data-ratio="42">Sepik</li>
<li data-title="sino-tibetan" data-ratio="28">Sino-Tibetan
<ul class="speechlev2">
<li data-title="chinese" data-ratio="13">Chinese</li>
<li data-title="tibeto-burman" data-ratio="34">Tibeto-Burman</li>
</ul>
</li>
<li data-title="uto-aztecan" data-ratio="60">Uto-Aztecan</li>
</ul>
Javascript
$(document).ready(function() {
tinysort('.speechlev2>li',{attr:'data-ratio'});
});
Result:
Indo-European
Tokharian
Chinese
Greek-Phrygian
Celtic
Tibeto-Burman
Armenian
Balto-Slavic
Nilo-Saharan
Sepik
Sino-Tibetan
Germanic
Albanian
Uto-Aztecan
Should be:
Indo-European
Tokharian
Greek-Phrygian
Celtic
Armenian
Balto-Slavic
Germanic
Albanian
Nilo-Saharan
Sepik
Sino-Tibetan
Chinese
Tibeto-Burman
Uto-Aztecan
I have set up a CodePen to show my problem:
http://codepen.io/anon/pen/QbPVox
My problem is that tinysort sorts the li also between different parents. How can I fix that
Can somebody help me with that?

Just sort each of your lists separately:
$(document).ready(function() {
$('.speechlev2').each(function() {
tinysort($('li', this), {attr:'data-ratio'});
});
});