We Keep Coding

Sort an unordered list alphabetically

I want to sort an unordered list alphabetically. I've tried many different javascript solutions, not one of them worked (tested in Safari and Chrome). This is the code I would like to use:
var activeLanguage = "de"
function sortUL(selector) {
var $ul = $(selector);
$ul.find('li').sort(function(a, b) {
var upA = $(a).text().toUpperCase();
var upB = $(b).text().toUpperCase();
return (upA < upB) ? -1 : (upA > upB) ? 1 : 0;
}).appendTo(selector);
};
$(document).ready(function() {
sortUL("#WoodList");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul id="WoodList">
<li>Banana</li>
<li>Catv</li>
<li>Apple</li>
<li>Orange</li>
<li>Car</li>
<li>Pear</li>
<li>Banana</li>
<li>Cat2</li>
<li>Apple4</li>
<li>Banana1</li>
<li>Cat</li>
<li>Apples</li>
<li>Banana</li>
<li>Cat</li>
</ul>
The list remains unsorted in the browser. Why is it not working ?

Here's a working example on JSFiddle: https://jsfiddle.net/vzbgzexc/
Make sure that you're loading jQuery. It doesn't look like anywhere in your code that you're loading jQuery, yet you're using $. You're likely receiving an error in your browser's console similar to this:
ReferenceError: $ is not defined
Insert:
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
Hope that helps!

target a <li> so that you can click

I am currently developing a program. It includes a 3 option navigation bar. It uses <li> and does not have id's, when i try to add id's to them it messes up the order, and doesent even work with a click! Im starting to loose faith with it.. can anyone help me on this one,
my GOAL is to have it alert different things on different clicks, so than I could link different html pages,
fiddle used HERE.
<ul class="ui-module menu-selector" id="menu-selector">
<li>Home</li>
<li class="js-is-active">Notif's</li>
<li>Profile</li>
</ul>

Since you don't have ids, I suppose that childNodes property will help a lot.
For example, you can use:
var lis = document.getElementById('menu-selector').childNodes;
// or you can select lis directly...
// var lis = document.querySelectorAll('#menu-selector li');
Array.prototype.slice.call(lis)
.forEach(function(li) {
// do something... like
li.onclick = function () {
console.log(this);
}
});
Note: childNodes (or querySelectorAll return) is NodeList type, and I use Array.prototype.slice.call() in order to use forEach() method on it.
See childNodes for more details.

if you don't want to have ids on your li elements for some reason you can use the following logic to select active li:
$("#menu-selector li.active").on("click", function(){
alert($(this).text())
});

I added id's for you, not sure what you meant by it messing up the order.
HTML
<div class="ui-items">
<header class="ui-module app-header">VoiceBox <i class="entypo-user-add"></i>
<i class="entypo-pencil"></i>
</header>
<div id="outer">
<ul class="ui-module menu-selector" id="menu-selector">
<li id="home_li">Home</li>
<li id="notif_li" class="js-is-active">Notif's</li>
<li id="profile_li">Profile</li>
</ul>
</div>
</div>
Javascript
var listItem = $('#menu-selector > li');
$(listItem).click(function() {
$(listItem).removeClass('js-is-active');
$(this).toggleClass('js-is-active');
});
$('#home_li').click(function(){
alert('home clicked')
})
$('#notif_li').click(function(){
alert('notifs clicked')
})
$('#profile_li').click(function(){
alert('profile clicked')
})
Fiddle http://jsfiddle.net/1swep9oq/2/

How do I do a nested for-each loop with JQuery to get specific li elements?

What I'm trying to do is essentially go through uls which are organized like
<ul class="some-ul">
<li class="some-li"></li>
<li></li>
<li></li>
<li class="some-li"></li>
</ul>
<ul class="some-ul">
<li class="some-li"></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="some-ul">
<li class="some-li"></li>
<li class="some-li"></li>
<li class="some-li"></li>
<li class="some-li"></li>
</ul>
and do something with the lis of class some-li and something else with the lis that don't have that class. So, it would be equivalent to
$('ul.some-class li.some-class').each(function() {
// do something
});
$('ul.some-class li:not(.some-class)').each(function() {
// do something else
});
except I want to do it like
$('ul.some-class').each(function() {
// loop through the list elements of this list
});
but I don't know how to construct that inner loop. Is this possible, and if so, what tool should I using?

Within .each, this will be the current element of the iteration. You can then use $(this).find() to find elements within it:
$('ul.some-ul').each(function(i, ul) {
$(ul).find("li").each(function(j, li) {
// Now you can use $(ul) and $(li) to refer to the list and item
if ($(li).hasClass('some-li')) {
...
}
});
});

You can use hasClass and a CSS selector to get all immediate children (The <li>s).
$('ul.some-class > li').each(function() {
if ($(this).hasClass('some-class')) {
//Do something
} else {
//Do something else
}
});

Loop through all the <li> and use hasClass() to see if they fit the class you want or not and react accordingly
$('.some-ul').children().each(function(){
// "this" is current li
if ( $(this).hasClass('some-li') ){
$(this).doSomeClassThing();
} else {
$(this).doNoClassThing();
}
});
One pass through and you are done

The callback of the each call gets the index and the element as arguments.
This way you can
$('ul.some-class').each(function(i, elt) {
$(elt, 'li.some-class').each ...
});
https://api.jquery.com/jquery.each/

Find the place of an element

I have a list
<ul>
<li class="list_1">a</li>
<li class="list_2">b</li>
<li class="list_3">c</li>
<li class="list_4">d</li>
</ul>
This is in a carousel, so that the list items change position (1-2-3-4, 2-3-4-1, 3-4-1-2, 4-1-2-3,...)
How can I find out, using javascript, which item is in, let's say, second and third position?
In the beginning, the list_2 and list_3 are in second and third position, after one cycle, the list_3 and list_4 are in second and third position, etc.
How to find out what list is in those positions, while I cycle through? For starters I just need to see it displayed in console with console.log(), something like:
On 2nd place is list_3, and on third is list_4.
Tried with this but doesn't work:
var $list_items = $(this).find('ul li');
$list_items.each(function(i,j){
$(this).addClass('list_' + (i+1));
console.log($list_items.eq(2).attr('class'));
});
I'm using $(this) because my original lists are enclosed in a div, and originally lists had no class, so I added them.

One approach is to use map() and index() to create an array of the element's class-name and index, obviously this depends on what, precisely, you want to find; but your question is somewhat vague on the result you want:
function mapIndices() {
// iterate over the 'ul li' elements, forming a map:
return $('ul li').map(function() {
// returning the className (classes) of the element and its index amongst
// siblings:
return this.className + ': ' + $(this).index();
// converting to an Array:
}).get();
};
// this is just a simple trigger to move the elements,
// to demonstrate binding the function:
$('#change').on('click', function() {
var ul = $('ul');
ul.find('li:first-child').appendTo(ul);
console.log(mapIndices());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="change">advance positions</button>
<ul>
<li class="list_1">a</li>
<li class="list_2">b</li>
<li class="list_3">c</li>
<li class="list_4">d</li>
</ul>
If, however, you simply want to find out which element is in a specific position:
$('#change').on('click', function() {
var ul = $('ul');
ul.find('li:first-child').appendTo(ul);
// bear in mind that JavaScript has zero-based indexing,
// 2 is the index of third element, not the second:
console.log(ul.find('li').eq(2));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="change">advance positions</button>
<ul>
<li class="list_1">a</li>
<li class="list_2">b</li>
<li class="list_3">c</li>
<li class="list_4">d</li>
</ul>
References:
eq().
find().
get().
index().
map().
on().

Array manipulation:
var arr = $('li').get(); // http://api.jquery.com/get/
// var arr = ["aa","bb","cc","dd"]; // you can try also using this guy
function doIt(){
if(this.id==="next") arr.push( arr.shift() ); // send first to last
else arr.unshift( arr.pop() ); // send last to first
$('ul').html( arr );
}
$('#prev, #next').on('click', doIt);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="prev">PREV</button>
<button id="next">NEXT</button>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>-----------</li>
</ul>

First give an id/class to the ul:
<ul id="mylist">
<li class="list_1">a</li>
<li class="list_2">b</li>
<li class="list_3">c</li>
<li class="list_4">d</li>
</ul>
Using jQuery to access the 'li' element at 2nd position:
var second_li = $('#mylist').find('li')[1]; // to access 2nd li use index 1
var second_li_class = $(second_li).attr('class'); // second_li_class will be equal to 'list_2'
var second_li_content = $(second_li).html(); // second_li_content will be equal to 'b'

Detecting "runs" of DOM elements in jQuery

What is the best way to detect runs of dom elements in jQuery?
For instance, if I have the following list of items
<ol>
<li class="a"></li>
<li class="foo"></li>
<li class="a"></li>
<li class="a"></li>
<li class="foo"></li>
<li class="foo"></li>
<li class="foo"></li>
<li class="a"></li>
<li class="foo"></li>
<li class="foo"></li>
<li class="foo"></li>
</ol>
Say I want to grab all the li.foo elements and wrap them inside their own <ol> block (or any wrapper for that matter) to end up with something like.
<ol>
<li class="a"></li>
<li class="foo"></li>
<li class="a"></li>
<li class="a"></li>
<li><ol>
<li class="foo"></li>
<li class="foo"></li>
<li class="foo"></li>
</ol></li>
<li class="a"></li>
<li><ol>
<li class="foo"></li>
<li class="foo"></li>
<li class="foo"></li>
</ol></li>
</ol>
As you can see from the example, I only want to wrap "runs" of li.foo dom elements (where there are 2 or more li.foo elements in succession.
I'm not sure of the best/most efficient way to accomplish this via jQuery (or just plain javascript for that matter).

Example: http://jsfiddle.net/kNfxs/1/
$('ol .foo').each(function() {
var $th = $(this);
var nextUn = $th.nextUntil(':not(.foo)');
if(!$th.prev('.foo').length && nextUn.length)
nextUn.andSelf().wrapAll('<li><ol></ol></li>');
});
Loop over the .foo elements, and if the previous element is not .foo, and it has at least 1 .foo after it, then grab all the next .foo elements using the nextUntil()(docs) method and include the original using the andSelf()(docs) method, then wrap them using the wrapAll()(docs) method.
Update: This will be a little more efficient because it avoids the nextUntil()(docs) method when there's a previous .foo().
Example: http://jsfiddle.net/kNfxs/2/
$('ol .foo').each(function() {
var $th = $(this);
if($th.prev('.foo').length) return; // return if we're not first in the group
var nextUn = $th.nextUntil(':not(.foo)');
if( nextUn.length)
nextUn.andSelf().wrapAll('<li><ol></ol></li>');
});

Use something like this:
$(li).each(function(){
if($(this).next().hasClass('foo')){
---- Recursively check until the end of the run has been found ----
}
});
To recursively check write a function that checks the next element until the end of the run has been found.

Not sure how well this works for performance:
var $foo = $('.foo + .foo');
$foo.add($foo.prev());
$foo will be the set of ".foo runs"
Edit to add:
I thought of a simpler way:
var $foo = $('.foo + .foo').prev('.foo').andSelf();

Working example: http://jsfiddle.net/v8GY8/
For posterity:
// Takes a jQuery collection and returns an array of arrays of contiguous elems
function groupContiguousElements( $elems ){
var groups = [];
var current, lastElement;
$elems.each(function(){
if ($(this).prev()[0] == lastElement ){
if (!current) groups.push( current=[lastElement] );
current.push( this );
}else{
current = null;
}
lastElement = this;
});
return groups;
}
var groups = groupContiguousElements( $('li.foo') );
$.each( groups, function(){
var wrapper = $('<ol>').insertBefore(this[0]);
$.each(this,function(){
wrapper.append(this);
});
});