We Keep Coding

Define new :first-child after current one was removed / moved

I have a function that removes list element from one ordered list then finds all ordered lists after current one, gets their first element and appends it to that lists previous one.
The issue: if I remove first element from any list or it is appended function stops working, I believe it is due jQuery remembering what first element was and as it is no longer in its place it can't find it, however it should just re-define / look up new element in particular list that is first child at the moment. Here is the function:
function removeQueueItem(element) {
//Get ordered list of removed list element
var itemMonth = element.parents().eq(2); //li.queue-month
//Get all following lists
nextMonths = itemMonth.nextAll('.queue-month');
//Fade out removed element
element.parent().fadeOut(function(index){
//Remove element from DOM
element.remove();
nextMonths.each(function(index) {
//Check if next month has socks
if($(this).find('.item-dragable').length > 0) {
var firstItem = $(this).find('.item-dragable:first-child');
$(this).prev().find('ol').append(firstItem);
}
});
});
}
JsFiddle - Remove first item in September then remove any item in August, the first item in September should become pink, but it isn't happening. This is what the problem is.

Because you are removing an a tag instead of a li tag. So when you search :first-child it is there, but you do not see it.
In order to make it work you need to change your code from:
element.parent().fadeOut(function(index){
//Remove element from DOM
element.remove(); <-- here
...
});
To:
element.parent().fadeOut(function(index){
//Remove element from DOM
$(this).remove(); <-- element to $(this)
...
});
JSFiddle

That's because it's the parent you're fading out, but the inner element you're removing. Your .item-dragable element still exists and ends up with its display property set to none. This means it's still the first child.
...becomes:
To fix this, simply change:
element.remove()
...to:
element.parent().remove()
JSFiddle demo.

Get next element with class (while ommitting others)

I have this code:
var toLoad = $('.sidebar').find('.active').next('li.list-element').attr('data-id');
Which should detect the next element after my .active with list-element class. It doesn't. The problem is, I have a list like this:
<li class="list-element active">...</li>
<li class="list-element">...</li>
<li class="ads">...</li>
<li class="list-element">...</li>
<li class="list-element">...</li>
And when I get to ads, my script stops. What can I do?

.next() will only target the next element. You need to use .nextAll() along with :first or :eq(0) to target the next first sibling with the required class:
var toLoad = $('.sidebar').find('.active').nextAll('li.list-element:first').attr('data-id')

The problem is your understanding of the .next() method is wrong, it does not return the element element matching the selector, it will return the next sibling element only if it matches the passed selector
One easy solution is to find all the next elements then use the first one in the set
var toLoad = $('.sidebar').find('.active').nextAll('li.list-element:eq(0)').attr('data-id');

Jquery next()
Get the immediately following sibling of each element in the set of
matched elements. If a selector is provided, it retrieves the next
sibling only if it matches that selector.

So, when you write
$('.sidebar').find('.active')
That will find one element, the li with the class active and .next() can only select from within that group.
You could, however, use just one CSS selector to find the next element from the .active one like so:
$('.sidebar .active ~ li.list-element:first').attr('data-id')
~ is the general sibling selector that matches elements that are after the original element (.active) and share a parent (.sidebar).

Using javascript, how to select an li relative to a specific other li

Given the following html list:
<ul>
...
<li>
<li> // <-- item to be selected
<li>
<li class='current'>
<li>
<li>
<li>
...
</ul>
How do I select the li two instances ahead of the li with class current?
Any pure javascript or jquery solution would be great!

Making it more generic, i.e if you want to select a li possibly(2nd or 3rd or what ever instance that appears prior to your selector), then try
$('li.current').prevAll(':eq(' + n-1 + ')');
Here n would be the instance # that you are talking about (Since it is 0 based index). In your case this would be:
$('li.current').prevAll(':eq(1)');
Do remember that prevAll returns the elements in the order starting from the selector, so you can just provide the index of the element from that position in prevAll with eq selector.
Fiddle

Very easily:
$('.current').prev().prev()

You can try
$('.current').prev().prev()

This may help...
var li=document.getElementsByTagName('li');
var i, n;
for(i=0;i<li.length;i++)
{
if(li[i].className=='current')
{
n=(i+2)%(li.length);
}
}
var x=li[n];

I have accepted an answer. My own solution first identified the index of the element to be selected:
var index = $('.current').index()-n+1;
n equals the number of items you want to be ahead of the current object. The +1 is because indexing starts at zero, yet nth-child at 1.
I then used the nth-child selector to get the right element:
$('ul li:nth-child('+index+')')

How to get UL's if child attribute using jquery?

i want to know how to get Unorderedlist's first child className. I know the UL's ID. How can i find it with jQuery?
Thanks in Advance!!

Give this a try:
$("#id li:first").attr("class");
where id=the UL's ID.

$('#list > li:first').attr('class')

#troynt made a valuable addition, adding the > in between the id of the ul and the li:first makes sure you only grab the first child of the ul you're targeting and not any li's within the child li's.
This will assure that you only get the first class name of the child LI, if there are multiple class names:
$('#id > li:first').attr('class').split(" ")[0]
That takes the class attribute, splits the string by spaces and returns the first element in the resulting array. If there is only one class name, it'll still work as expected.

$("#ULID li:first").attr("class");
Also, keep in mind that your element can potentially have more than one class.

Jquery - Get xth element

For example, I have a div with an id (lets say "the_div"). This div contains an unordered list, and this list has 5 items in it.
How would I add a class to the third list item, without any of the list items having a class attached to them?
Edit: Even better, how would I change the list item text to equal what number element it was?
Thanks.

Or...
$('#the_div ul li:eq(2)').addClass('className');
You can combine the selectors together - if you prefer :)

For your first problem, you can use eq, which is 0 based:
$('ul li', '#thediv').eq(2).addClass('whatever'); // add class to 3rd item
For your second problem, you can use each to iterate through all the list items. The callback function passes an argument containing the index of the current element in the set:
$('ul li', '#thediv').each(function(i) {
$(this).text(i); // update each list item with its index, 0 based.
});