We Keep Coding

Determine if a related element is above or below

i'm having an unordered list with several elements and i'm using jquery sortable for moving items around - here's my markup:
<ul>
<li id=1>item 1</li>
<li id=2>item 2</li>
<li id=3>item 3</li>
<li rel=2>insert</li>
<li id=4>item 4</li>
</ul>
the "insert" element is related to the LI having ID 2 - my question:
what's the best practice for determing if the related item is above or below the "insert" element? (in this case: above)

if($(this).prevAll("[id=2]").length > 0)
{
//element is above
}
if($(this).nextAll("[id=2]").length > 0)
{
//element is below
}
You can use nextAll and prevAll functions of jquery for this. Here $(this) refers to insert element.

You can use the index function to get the place of the element and compare it to other elements:
inserted = $('li[rel=2]');
$('ul li').click(function() {
if (inserted.index() > $(this).index()) {
console.log('Clicked element is above');
} else if (inserted.index() < $(this).index()) {
console.log('Clicked element is below');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li id=1>item 1</li>
<li id=2>item 2</li>
<li id=3>item 3</li>
<li rel=2>insert</li>
<li id=4>item 4</li>
</ul>

Trying to parse tag element

I am trying to parse a web page with JavaScript targeting list <li> without class.
<ul id="cartItems">
<li class="heading">
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>

Use querySelectorAll to get all li elements without a class.
var liWithoutClass = document.querySelectorAll('#cartItems > li:not([class])');
console.log(liWithoutClass);
document.write(liWithoutClass[0].textContent); // Output the first li
document.write('<br />' + liWithoutClass[3].textContent); // Output the last li
<ul id="cartItems">
<li class="heading">Heading</li>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
<li>Element 4</li>
</ul>

var elems = document.querySelector(".heading");
console.log(elems);
//Now we strip the class out like this:
elems.setAttribute(class, "none");
//Now we display the updated values below
console.log(elems);
// This won't work in Stack's editor, so you'll have to validate it against the page you want.
//Now, just grab the entire element by id from the page as below:
var updatedContent = document.getElementById("cartItems");
console.log(updatedContent);
//Again, stack's editor is limited, but overall this should work fine on your page.
<ul id="cartItems">
<li class="heading">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>

Jquery If class has matching ID then hide

What I'm trying to do here is check if an element has the same id as a class in another element if so hide the matching id.
So far this is what I have came up with but it doesn't seem to kick.
JSfiddle
var theid = $('#me li').attr('id');
if ($('#you li').hasClass( theid )) {
$('#me li#'+theid+'').hide();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<ul id="me">
<li id="num-0">iam 1</li>
<li id="num-1">ieam 2 & should be hidden</li>
<li id="num-2">iam 3</li>
<li id="num-3">iam 4</li>
<li id="num-4">ieam 5 & should be hidden</li>
<li id="num-5">iam 6</li>
</ul>
<ul id="you">
<li class="num-1">iam killer</li>
<li class="num-4">iam killer</li>
</ul>

Use each() to loop over all the li elements inside the #you
hide() the elements having the id same as the class of current element in loop.
$('#you li').each(function() {
$('#' + $(this).attr('class')).hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<ul id="me">
<li id="num-0">iam 1</li>
<li id="num-1">ieam 2</li>
<li id="num-2">iam 3 & should be hidden</li>
<li id="num-3">iam 4</li>
<li id="num-4">ieam 5 & should be hidden</li>
<li id="num-5">iam 6</li>
</ul>
<ul id="you">
<li class="num-2">iam killer</li>
<li class="num-4">iam killer</li>
</ul>
Demo

When you use the .attr() method on a jQuery object that contains multiple elements, it just returns the attribute from the first element. You need to loop over each element and check them one at a time.
It is, however, OK for your purposes to use .hasClass() on the set of all of the #you elements, because .hasClass() will return true if any of the elements in the set has that class. So:
var you = $('#you li');
$('#me li').each(function() {
if (you.hasClass(this.id))
$(this).hide();
});
Note that I'm keeping a reference to the $('#you li') jQuery object in the variable you to save selecting those elements again every time in the loop.
Demo: https://jsfiddle.net/d65sz4js/2/

Try this for your jquery:
$(function() {
$("#you li").each(function(){
var theid = $(this).attr('class');
$('#'+theid).hide();
});
});
Demo: https://jsfiddle.net/nkem9o7o/

You could filter the #me li's, returning elements where their id exists as a class in #you li's, then just hide them. This would also work for multiple classes:
$('#me li').filter(function() {
return $('#you').has('.' + this.id).length;
}).hide();
Here's a fiddle

Jquery, get values from <li> tag

I have list with id myid. I can get values li values like this $('#' + i).text(). But I am using $( '#myid' ).sortable() . How can get values in currently displayed order? Demo here. I need to implement function in stop:
<ul id='myid'>
<li id='1'>value 1</li>
<li id='2'>value 2</li>
<li id='3'>value 3</li>
<li id='4'>value 4</li>
<li id='5'>value 5</li>
</ul>

Use .each() with .text() : Updated Fiddle
stop:function(){
$('li',this).each(function(){
alert($(this).text())
});
}
or map() to get them into array.
stop:function(){
var $li= $('li',this).map(function(){
return $(this).text()
});
alert($li)
}

Select jquery elements except specific children

This is a simple question, but, I haven't found a clear answer in any of the question that I found. I modified a JSFiddle for my specific question.
I got this tiny code:
<ul>
<li id='one'>Element 1</li>
<li id='two'>Element 2</li>
<li id='three'>Element 3</li>
<li id='four'>Element 4</li>
<li id='five'>Element 5</li>
</ul>
and this script should return the ul element excepting the first li:
$(function(){
$("ul").not($('#one'))
});
Instead, it removes every li. What have I done wrong?
EDIT: In others words, I would like a selector which selects this, without removing the actual element (= inside a variable)
<ul>
<li id='two'>Element 2</li>
<li id='three'>Element 3</li>
<li id='four'>Element 4</li>
<li id='five'>Element 5</li>
</ul>
FIDDLE: http://jsfiddle.net/LVUMs/13/

Use
$("ul li").not($('#one')).remove();
DEMO
OR
$("ul li:not(#one)").remove();
DEMO 2
EDIT
You need
var ulexceptOneLi = $("ul li:not(#one)");
or
var ulexceptOneLi = $("ul li").not($('#one'));

Try this code:
Fiddle
$(function(){
$("ul>li").not($('#one')).empty();
});

Assuming you meant to keep the ul in play:
$("ul li#one").remove();
Here's a fiddle...
If you're wanting to return a ul element with the removed element inside, try this:
function do_crazy_thing(){
var removed = $("ul li#one").remove();
return $('<ul></ul>').append(removed);
}
do_crazy_thing();
Here's another fiddle...
Here's how you would then append your new ul element to the body...

Demo Fiddle
According to your question, your expected output is :
<ul>
<li id='two'>Element 2</li>
<li id='three'>Element 3</li>
<li id='four'>Element 4</li>
<li id='five'>Element 5</li>
</ul>
Check the demo.
Edit :
$(function(){
var removed = $("ul li:not(#one)");
});
OR
var op = $("ul :not(#one)");

Please try below JS code
$(function(){
var test= $("ul li").remove("#one");
});