English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Method of Using JQuery to Select HTML and Traverse Functions

Using jQuery, it is easy to select HTML elements. But sometimes, when the HTML structure is complex, it is a troublesome task to refine the elements we choose.

1children

This function gets a group of direct children of elements.

Passing a selection expression to children() will narrow down the selection results to the selected elements;

If children() does not accept any parameters, it will return all direct children; it does not return its grandchild elements.

2filter

This function filters elements from a collection by passing a selection expression. Any element that does not match this expression will be removed from the selected collection.

3not

Opposite to filter, not() removes matching elements from the collection.

4add

What if we want to add some elements to the collection?63;add() function is exactly what it does.

5slice

Sometimes, we need to get a subset of the collection based on the position of the element in the collection. slice() is just for this.

The first parameter is the position of the first element, starting from zero, which is included in the returned segment;

The second parameter is the index of the first element, starting from zero. It is not included in the returned segment. If omitted, it extends to the end of the set;

6parent

The parent() function selects the direct parent of a series of elements.

7parents

This is the plural form, parents() selects all ancestor elements of the set. What I mean is that all ancestor elements include direct parents to the 'body' and 'html' elements. Therefore, it is best to narrow down the selection results by passing an expression.

8siblings

This function selects all siblings of a group of elements, and passing an expression can filter the results.

9prev & prevAll

The prev() function selects the previous sibling node. prevAll() selects a collection of all sibling nodes before an element.

10next & nextAll

These functions work in the same way as prev and prevAll, but they select the next sibling.

This article using the method of selecting HTML traversal with jQuery is all the content that the editor shares with everyone. I hope it can give everyone a reference, and I also hope everyone will support and cheer for the tutorial.

You May Also Like