Develop Reference

Get all elements that contain a particular descendant

I'm trying to loop through all <li> tags that contain the class .fas using the jQuery contains() method and perform some stuff on each one.
$('li:contains(".fas")').each(function (index) {
//stuff
}
I keep getting the reference error that contains is not defined. Am I using this method incorrectly?

You want has().
$('li:has(".fas")').each(function (index) {
//stuff
}
https://api.jquery.com/has/

Another way to do this would be to flip your logic.
$('.fas').closest('li');
You could find all the fas and then find their parent lis.

Your question ambiguity leaves me to cross answer this.
First off:
$('li.fas')
That says to the sizzle engine: Get all elements that have class fas, then reduce that to elements of li (that have that class)
With a space in between this says:
$('li .fas')
Get all elements that have a class fas, then reduce to those that are a decedent of an li element.
$('li>.fas')
Get all elements that have class fas, then reduce that do a set that are direct children of an li element.
The other answer has the .has() so I will not repeat that.
Filter: (basically same as :has() in this case
$('li').filter(function(){
// reduce the li set; return true when a descendant has the 'fas' class
return !!$(this).find('.fas').length;
});
More on context here: https://stackoverflow.com/a/16423239/125981

How can I change an attribute value for all list items?

I have a simple structure like:
HTML
<ul id="costsDropdown">
<li data-position="bla bla"></li>
</ul>
and I want to change each "data-position" attribute of my list Elements.
My first Jquery Shot was this here:
$("#costsDropdown ul").each(function() {
$("li").attr("data-position", "TEST-VALUE123");
});
but it doesnt work, I think my selector are wrong...
could anyone give me a hint please?
Thanks for any help!
Greetz

Your selectors are a bit off
$("#costsDropdown ul").each
That is trying to select the child ul of the container #costsDropdown (which is the ID of the ul) - what you want is:
$("#costsDropdown li").each(function() {
$(this).attr("data-position", "TEST-VALUE123");
});
ID's are unique - no need to double up the selector with an ID and the type of element it is.
Note that I used $(this), not $("li"), inside the each callback. $("li") selects all li elements, anywhere on the page; we just want a jQuery wrapper for the one specific one we're handling inside the each.
In fact, the each is completely unnecessary because of the set-based nature of jQuery; if you use the .attr setter, it sets the attribute on all elements in the set:
$("#costsDropdown li").attr("data-position", "TEST-VALUE123");
That will set the value on all of the li elements inside #costsDropdown.
If you need to set separate individual values on the individual li elements, you still don't need each (though it's fine if you want to use it); you can use the version of attr that accepts a callback that it uses to find out what value to set:
$("#costsDropdown li").attr("data-position", function(index) {
return "Test value " + index;
});
That will set "Test value 0" on the first li, "Test value 1" on the second, etc. And like the each example above, if you need to, you can use this within the callback to refer to the li for that call (possibly using $(this) to wrap it if you need a jQuery wrapper).

$("#costsDropdown ul") matches no elements, it has to be $("#costsDropdown") (#costsDropdown is the ul).
And even that is unnecessary. Go
$("li[data-position]").attr("data-position", "TEST-VALUE123");
instead.

How to check if element exists after the current element with jQuery?

I need to check the following
if after $('.brandModelLineWrapper') there isn't a clearfix div, add it:
$('.brandModelLineWrapper').after("<div class='clear'></div>")
How could I do that?

You can use .next() with :is selector to check if it is div with class clear. and you can use .after() or insertAfter() to append the clear div based on first condition:
if(!$('.brandModelLineWrapper').next().is('div.clear')){
$('.brandModelLineWrapper').after("<div class='clear'></div>");
}

Use next() with a specific selector to check
if(!$('.brandModelLineWrapper').next('div.clear').length){
$('.brandModelLineWrapper').after("<div class='clear'></div>");
}

Find element above another using jQuery

I'm trying to find the element using jQuery from the following html.
<ul class="gdl-toggle-box">
<li class="">
<h2 class="toggle-box-title"><span class="toggle-box-icon"></span>Volunteer Form</h2>
<div class="toggle-box-content" style="">
</div>
</li>
</ul>
What I'm looking to do is when the h2 is clicked find the li above the h2 add a class active to it. Tried a few different calls but no luck.
EDIT
The biggest issue is that there are multiple toggle boxes on a page so something like this works on pages with a single toggle but pages with multiple the result is they all open together.
var gdl_toggle_box = jQuery('ul.gdl-toggle-box');
gdl_toggle_box.find('li').each(function(){
jQuery(this).addClass('item');
});
gdl_toggle_box.find('li').not('.active').each(function(){
jQuery(this).children('.toggle-box-content').css('display', 'none');
});
gdl_toggle_box.find('h2').click(function(){
if( jQuery('.item').hasClass('active') ){
jQuery('.item').removeClass('active').children('.toggle-box-content').slideUp();
}else{
jQuery('.item').addClass('active').children('.toggle-box-content').slideDown();
}
});

You can use closest.
closest will match the first parent element that matches the selector traversing up the DOM tree.
Demo
$('h2.toggle-box-title').click(function(){
$(this).closest('li').addClass('active');
});

Try this.
$('h2.toggle-box-title').click(function(){
$(this).parent().addClass('newclass');
});

try this:
$('h2.toggle-box-title').click(function() {
$(this).parent('li').addClass('active');
});

On you click in the button you can use the event:
$("something").parent().find("h2.myClass");
// And if you want you can add class after you find you object
http://api.jquery.com/find/

Selecting an element's parent
In order to select an element parent, you can use the parent() function.
Try this:
$('h2.toggle-box-title').click(function() {
$(this).parent('li').addClass('active');
});
*to be more specific, you target the parent you would like to choose by specifying its selector
Check the jQuery API Documentation here
parent() - Get the parent of each element in the current set of matched elements,
optionally filtered by a selector.

Selecting all but the first child of parent with an ID and then applying action

I want to select all the child elements of a parent element (except the first) with jQuery and I have the below..
$("li:not(:first-child)");
But I'm not sure how I can apply it to just the certain parent ID, would something like this work?
$('#myID').("li:not(:first-child)");
If so, I then want to add an element before the respective <li> tag. Would I then be able to do this with?
$('#myID').("li:not(:first-child)").before('<li>Test</li>');
I'm guessing something above is wrong as it isn't working.

Close, just pass in the selector context:
$("li:not(:first-child)", "#myID")
http://api.jquery.com/jQuery/
jQuery( selector [, context] )
selector: A string containing a selector expression
context: A DOM Element, Document, or jQuery to use as context
EDIT:
My initial answer assumed that you have no more li within the child's li. if you strictly only wants to select the children, use >:
$("#myID > li:not(:first-child)")

There's different solutions:
$("li:not(:first-child)", "#myID"); // see #SiGanteng answer
$("#myID li:not(:first-child)");
$("#myID").find("li:not(:first-child)");

Simple: using the :gt() help selector:
Just do it like: demo fiddle
$("#myID li:gt(0)").before('<li>Test</li>');
If you are concerned about speed :) :
$("#myID").find("li:gt(0)").before('<li>Test</li>');
or like: demo fiddle
$("#myID li:not(:first-child)").before('<li>Test</li>');

Assuming #myID is a ul or ol element, another possible way to get all children but the first is
$('#myID').children().slice(1)