Develop Reference

Select next element of a given type after specified element

I am trying to select an element based on whether another element has a given ID containing certain text. The problem is that there are multiple elements with this same class name on the page and I only want to select the ones that have the element with this ID directly above them. Is this possible? I tried:
if ($(".element[id*='XYZ']").length > 0){
$(".element").nextAll('.elementoselect').text('Change the text');
}
My first instinct was to do it based on them being within the same DIV but the problems is that the DIVs are given classes when the page loads and they are generic, so this is the only other way I could think of.

Use chaining with the selector
$(".element[id*='XYZ']").nextAll('.elementoselect').text('Change the text');

If you use selector chaining , your oissue could be solved
$(".element[id*='XYZ']").nextAll('.elementoselect').text('Ch‌​ange the text')

Grabbing a class within a class with javascript

Hello this is my first question and I'm an amateur developer so forgive me in advance. I'm trying to grab this specific instance of the value class. The website I am working on has hundreds of different values associated with the value class.
<li class = "vin">
<strong class = "title">VIN:</strong>
<span class="value">121212121212121212</span>
</li>
Below is what I've been doing and it hasn't been working.
var vinNum = document.getElementsByClassName('li.vin','span.value');
console.log(vinNum.innerText);
Thank you

Although the existing answers cover the "modern" way to do this already - you can use most of the getElementsBy... (all, I think - was gonna say except getElementById, but that is named in singular for a reason, and because of the meaning of an id special) methods on all elements.
https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByClassName:
The Element.getElementsByClassName() method returns a live HTMLCollection containing all child elements which have all of the given class names. When called on the document object, the complete document is searched, including the root node.
So you can use that twice, to first select an element with one specific class, and then another with a different class "within it", among the descendants of the former. (Not "child elements", as the quoted MDN reference wrongly puts it.)
var vinNumContainer = document.getElementsByClassName('vin')[0],
vinNumElement = vinNumContainer.getElementsByClassName('value')[0];
(Necessary checks for whether elements exist before accessing them, what to do if more than one element (of either one) exists, etc., left out for brevity ;-)
But a simple call to querySelector is of course a quicker way to do it.

Try
var vinNum = document.querySelector('li.vin span.value');
console.log(vinNum.innerText);
This works because rather than selecting by class you're selecting the li.vin element which has a span.value as a child. vinNumber is now a node element. When you call vinNum.innerText you should get the correct number. When you console.log(vinNum) in uour example you will most likely see undefined or the incorrect element.

You can use the document.querySelector function in order to search elements on your page based on class, ID, or anything else that can be selected using a CSS selector.
Using Mozilla's CSS Selector reference, we can see that the CSS selector syntax to select an element which is a direct child of some other element is A > B, where A is a selector matching the parent, and B is a selector matching the child.
So one way to do this is to use:
var vinNum = document.querySelector('li.vin > span.value')
The one-liner above will match the first span element of class value which is a child of a li element of class vin.
However, if you have multiple examples of this structure (a li of class vin with a span of class value within it), using this selector won't work. In fact, if you want to have access to each specific span of class value individually, perhaps the best way would be to add a unique id attribute to each of them.
If your structure looked like this:
<li class = "vin">
<strong class = "title">VIN:</strong>
<span class="value" id="v25">121212121212121212</span>
</li>
You could then use the following:
var vinNum = document.querySelector('#v25')
One last alternative for when you have a list of nested HTML elements all with the same structure is to use document.querySelectorAll, which will return all DOM nodes which match your query and allow you to use JavaScript to run through them and select the values you want.

How to change attribute of surrounding div/parent effectively?

I have a table with some radiobuttons in it. When i click on a radiobutton, i want to update two of the sorrounding containers ID attribute (a div and a table). The problem is, i need to go 4 and 6 levels up, and the only way i know how to do this is parent().parent().parent().parent() etc.
I am looking for a better solution, and was hoping someone could point me in the right direction. You can see an image of how the "parent-child" tree is here:
http://imageshack.us/photo/my-images/834/imgkz.png/
I already have a clickhandler etc set up.
Basicly i need to check if the table's id attribute is "answeredTable", if not i need to change it. Also i need to check if the div two levels up from the table is "answered", if not, i need to change that too.
Thanks

You can use .closest('#answeredTable') or .parents('#answeredTable').
Using .parent() only selects the first parent element upon the DOM tree, selecting .closest() will allow you to walk up to DOM tree and match until it finds the element, while .parents() will return the whole parentset of the DOM and match the element in the whole parentset.

You need to use .parents() that go through multiple level of the DOM
For instance, in your example, you could get the surrounding div with this code:
$("#Q_18_2015").parents("div#answered")
By the way, id should be unique, or else, your code might probably not work. You should use classes instead.
<div class="answered">
Thus, the code would become:
$("#Q_18_2015").parents("div.answered")
provided that Q_18_2015 is really a unique id

I think what you want to use is closest http://api.jquery.com/closest/

you can use .parents
$("element").parent(".parentClass")
parents will go up the DOM until finds the parent with class parentClass

div addClass only on ONE div

When i do something like :
$('#container').addClass("contract");
It only add class to the first div with id container
When i do something like :
$('.container').addClass("contract");
It adds the class to ALL the divs with class container
WHY ?

Every element ID must be unique. An ID points to one and only one attribute. Jquery or any other framework would not even consider that you might have more than one element with a particular id. All your elements need to have a different id. Javascript and the DOM expect this (document.getElementByID for example will return just one element, and might now work at all if the ID is duplicated). Everything expects this.

Because id attribute has to be unique in HTML document. So there is no need to search for any others eelements with id="abc" when you find a first one.

An element's ID attribute should uniquely identify it. A class attribute may be applied to more than one element. As ID is unique, jQuery will only apply it to the first element that matches that.

jQuery Remove CSS Class from all Descendants at once

Can I remove a specific CSS class from all XYZ elements within an element at once?
Example: Remove CSS class active from all <a> anchors within my search div.
If so, how?

$("#mydiv a").removeClass("active");

If search is a class:
$("div.search a").removeClass("active");
If search is an ID:
$("#search a").removeClass("active");

Yeah. You do it like this:
$("div a .className").removeClass("className")
Or, supposing you only want to do it on a certain div, as long as the div has an id attribute set, you could do this:
$("#divIDValue a .className").removeClass("className")
With jQuery selectors, # with some text after it refers to the object (div, span, anchor, whatever) with the id attribute set to whatever that text is. A period refers to all objects with that the class name matching the text coming after the period. As demonstrated above, you can nest the selector text. So in the examples above, here's what happens:
Example #1
Find all divs
Finds all anchors within all divs
Finds all of the anchors from #2 that have class .className
Example #2
Find the div with the id attribute set to "divIDValue"
Find all anchor tags within that div
Find all anchor tags within that list of anchor tags that match the class name className
Keep in mind that for all of the objects in your page, only one object can have any particular id value. So, you can have two objects with the id set to 'divIDValue' - although your page will still probably look OK, jQuery will only find the first item with id. Classes, on the other hand, can be used for multiple items (as you probably already know).

A more generic solution to remove the class from any possible element.
// I like to use find as I usually have my wrapper in a variable.
$('#my-wrapper').find('.active').removeClass('active');
Or
$('#my-wrapper .active').removeClass('active');
This will affect all elements within the wrapper: span, h3, div, li, td, etc. With html 5 there are now over 100 possible tags.