❮ jQuery Traversing Methods
Example
Return all sibling elements of each
$[document].ready[function[]{
$["li.start"].siblings[].css[{"color": "red", "border": "2px solid red"}];
}];
Result:
- ul [parent]
- li [sibling]
- li [sibling]
- li [sibling with class name "start"]
- li [sibling]
- li [sibling]
Try it Yourself »
Definition and Usage
The siblings[] method returns all sibling elements of the selected element.
Sibling elements are elements that share the same parent.
The DOM tree: This method traverse forward and backwards along siblings of DOM elements.
Tip: Use the prev[] or next[] method to narrow down the search for only previous or next sibling elements.
Syntax
$[selector].siblings[filter]
filter | Optional. Specifies a selector expression to narrow down the search for sibling elements |
Try it Yourself - Examples
Narrow down the search
How to use both parameters to filter the search for sibling elements.
Select all sibling
elements of each
How to narrow down the search for all sibling
elements of each
❮ jQuery Traversing Methods
❮ jQuery HTML/CSS Methods
Example
Remove the class name "intro" from all
elements:
$["button"].click[function[]{
$["p"].removeClass["intro"];
}];
Try it Yourself »
Definition and Usage
The removeClass[] method removes one or more class names from the selected elements.
Note: If no parameter is specified, this method will remove ALL class names from the selected elements.
Syntax
$[selector].removeClass[classname,function[index,currentclass]]
classname | Optional. Specifies one or more class names to remove. To remove several classes, separate the class names with space Note: If this parameter is empty, all class names will be removed |
function[index,currentclass] | Optional. A function that returns one or more class names to remove
|
Try it Yourself - Examples
Change the class name of an element
How to use addClass[] and removeClass[] to remove one class name, and add a new class name.
Remove class using a function
Using a function to remove a
class from the selected elements.
Remove several class names
How to remove several class names from the selected elements.
❮ jQuery HTML/CSS Methods
Description: Get the siblings of each element in the set of matched elements, optionally filtered by a selector. selector A string containing a selector expression to match elements against. Given a jQuery object that represents a set of DOM elements, the The method optionally accepts a selector expression of the same type that we can pass to the Consider a page with a simple list on it:
1 2 3 4 5 6 7 .siblings[ [selector ] ]Returns: jQuery
version added:
1.0.siblings[ [selector ] ]
.siblings[]
method allows us to search through the siblings of these elements in the DOM tree and construct a new jQuery object from the matching elements.$[]
function. If the selector is supplied, the elements will be filtered by testing whether they match it. list item 3
If we begin at the third item, we can find its siblings:
1 |
|
The result of this call is a red background behind items 1, 2, 4, and 5. Since we do not supply a selector expression, all of the siblings are part of the object. If we had supplied one, only the matching items among these four would be included.
The original element is not included among the siblings, which is important to remember when we wish to find all elements at a particular level of the DOM tree. However, if the original collection contains more
than one element, they might be mutual siblings and will both be found. If you need an exclusive list of siblings, use $collection.siblings[].not[$collection]
.
Examples:
Find the unique siblings of all yellow li elements in the 3 lists [including other yellow li elements if appropriate].
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
|
Demo:
Find all siblings with a class "selected" of each div.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
|