Develop Reference

HTML class not removed

See my example here: https://jsfiddle.net/ddan/xvq6ofhh/
JS
$(function() {
var listEditPane = $('#editpane');
console.log($(listEditPane).find('.input-highlight').length); // 2
$(listEditPane).find('.input-highlight').removeClass('.input-highlight');
console.log($(listEditPane).find('.input-highlight').length); // still 2 ???
});
The class is not removed, the length is still staying the same. What am I missing?
$(listEditPane).find('.input-highlight').removeClass('.input-highlight');

The .removeClass() method expects the name(s) of the class(es) to remove, but you are passing a selector '.input-highlight'. Remove the . from the beginning:
$(listEditPane).find('.input-highlight').removeClass('input-highlight');
Demo: https://jsfiddle.net/xvq6ofhh/1/

jQuery .not() function not working

I recently met a problem with .not() function, this is the code:
var interval = setInterval(function() {
$('.test').not('.updated').each(function(){
var $parentDiv = $('.test').parent('div');
// do something
parentDiv.find('.test').addClass("updated");
//Above: change this element's status
});
}, 3000);
Problem is:
Sometimes when the element $('.test') who has class 'updated' also within the loop.
What I think:
it means the not() selector not working?
So I would like to know what is REALLY the problem of the code?

Your code is finding all the elements with class "test", and then excluding those that also have the class "updated".
Then, for each of those elements, you're doing another .find() operation to find elements with class "test". That, however, does not include the .not() call, so if you have an element with class "test" nested inside another one, it will be affected whether or not it already has class "updated".
I think your code really should just be like this:
var interval = setInterval(function() {
$('.test').not('.updated').addClass("updated");
}, 3000);
You don't need the .each() because .addClass() will do that for you.
edit — if you do need to do more work inside a .each(), your code would look like this:
var interval = setInterval(function() {
$('.test').not('.updated').each(function(){
var $parentDiv = $(this).parent('div');
// do something
$(this).addClass("updated");
//Above: change this element's status
});
}, 3000);
Inside the .each() callback, this will be bound to each of the selected elements from the outer jQuery sequence: the set of elements that have class "test" but not class "updated". If you use $(".test") again inside the .each() callback, that will start all over again and find all the elements with class "test" in the entire page.

Here is your updated function which should work use $(this) instead of $('.test') inside the each loop
var interval = setInterval(function() {
$('.test').not('.updated').each(function(){
var $parentDiv = $(this).parent('div');
// do something
$(this).addClass("updated");
//Above: change this element's status
});
}, 3000);
As you are referencing in the each $('.test') which is all the test class .updated or otherwise that is the reason the .updated class is still coming up in the loop

You are using .find() which is used to select all descendants of that element.
Refer .find()
Therefore, in your case, the scenario is class .test without class .updated will search in all its children to find class .test and it will add class updated to it. So, all the children whether or not they are having class .updated, .updated class will be added to it.
Hence, what you want to do can be simply achieved by this:
$('.test').not('.updated').each(function(){
$(this).addClass("updated");
});
or why not simply,
$('.test').not('.updated').addClass('updated');

jquery not adding class when using eq()

Having a bit of trouble when using this:
$('.instrumentSelect').click(function(){
var thisElement = $(this).index();
$('.instrumentSelect').eq(thisElement).addClass('active');
$('.active').removeClass('active');
});
removes class just fine, I console logged var thisElement and returns the correct index, just not appending the class to it. Fire bug does not return an error.

I'm not sure what you're trying to do, but removing the class first and adding it later makes more sense. Also, why are you using index and eq() when you can add a class with $(this)?
Try this:
$('.instrumentSelect').click(function(){
$('.active').removeClass('active');
$(this).addClass('active');
});

$('.instrumentSelect').click(function(){
var thisElement = $(this).index();
$('.instrumentSelect').eq(thisElement).addClass('active');
$('.active').not($(this)).removeClass('active');
});
or more simply you invert those lines like this
$('.active').removeClass('active');
$('.instrumentSelect').eq(thisElement).addClass('active');
You are adding it and then removing it. You have to exclude the object you are manipulating.

Probably you're trying to clear .active class before adding it to current item
$('.active').removeClass('active');
$('.instrumentSelect').eq(thisElement).addClass('active');

use of Jquery .after() for moving an element around

I'm reading the jquery manual regarding the .after() function:
$('.container').after($('h2'));
and it says
"If an element selected this way is inserted elsewhere, it will be
moved rather than cloned"
So if I have multiple
<div class='before' onclick='afterfunction();'><div>,
and I would want to place <div class='after'></div> after whichever div is clicked (have it move, not clone) would I do something like this?
var afterdiv = "<div class='after'></div>";
function afterfunction() {
$(this).after(afterdiv);
}
Thanks for all your help!

Like you said:
An element in the DOM can also be selected and inserted after another element:
$('.container').after($('h2'));
If an element selected this way is inserted elsewhere,
it will be moved rather than cloned:
But you missed the bold part.
$('.before').click(function() {
afterfunction(this);
});
// this will not work cause you'll append a string to your DOM
// var afterdiv = "<div class='after'>ola</div>";
// and will repeatedly be appended after each action.
// instead define your element by wrapping it into a $( )
var afterdiv = $("<div class='after'>ola</div>");
// now 'afterdiv' variable is binded to that element only once inside the DOM
function afterfunction(elem) {
$(elem).after(afterdiv);
}
And you don't need to .remove() it (like wrongly suggested in an answer here.)
demo jsFiddle

Make .before div like this:
<div class='before'><div/>
Then try,
$('.before').on('click', function() {
afterfunction(this);
});
function afterfunction(el) {
var afterdiv = "<div class='after'></div>";
$('.after').remove(); // remove previous `.after`
$(el).after(afterdiv); // add newly after the clicked div
}
DEMO

jQuery .clone .insertAfter with a new ID

How can I clone a DIV, append it right after the div and give it a new identifier?
I have a DIV with a class reflection, I want each instance of this DIV, cloned, and inserted right after the original, but with the class reflected (without the class, reflection) How can I accomplish this with jQuery?
Here's my current fiddle, but it doesn't work right... http://jsfiddle.net/yUgn9/

Pass a function to .after(), and have it return the updated clone.
$('div.reflection').after(function() {
return $(this).clone().toggleClass('reflection reflected');
});
DEMO: http://jsfiddle.net/PFBVX/
In older versions of jQuery, do this...
$('div.reflection').each(function() {
$(this).after($(this).clone().toggleClass('reflection reflected'));
});
DEMO: http://jsfiddle.net/PFBVX/1/

I believe you'll need to .each() of them to handle them individually. What the code is currently doing is grabbing all of them and cloning them after all of them. Instead, you want to handle each of them individually and insert the clone after the original, after changing the classes around as desired.
$(document).ready(function(){
$('div.reflection').each(function () {
var org = $(this),
clone = org.clone();
clone.removeClass('reflection').addClass('reflected')
.insertAfter(org);
});
});