Detail of jQuery traversal function
- 2020-07-21 06:34:18
- OfStack
jQuery traversal functions include methods for filtering, finding, and concatenating elements.
function describe
.add() Adds an element to the collection of matching elements.
.andSelf() Adds the previous set of elements from the stack to the current collection.
.children() Gets all the children of each element in the set of matched elements.
.closest() Starting from the element itself, matches the parent element level by level, and returns the ancestor element that first matches.
.contents() Gets the child elements of each element in the set of matched elements, including text and comment nodes.
.each() right jQuery The object iterates, executing a function for each matched element.
.end() Ends the nearest in the current chain 1 Subfilter and return the collection of matched elements back to the previous 1 Secondary state.
.eq() Reduces the collection of matched elements to a new element in the specified index.
.filter() Reduces the collection of matched elements to a new element that matches the return value of a selector or a match function.
.find() Gets the offspring of each element in the current set of matched elements, filtered by a selector.
.first() Reduces the set of matched elements to the first in the set 1 An element.
.has() Reduces the collection of matching elements to a collection containing descendants of a specific element.
.is() Checks the current set of matched elements against the selector, if at least exists 1 Returns the number of matched elements true .
.last() Reduces the collection of matched elements to the last in the collection 1 An element.
.map() Each element in the current matching set is passed to the function, resulting in a new one containing the return value jQuery Object.
.next() Gets the next sibling of each element in the set of matched elements.
.nextAll() Gets all the sibling elements after each in the set of matched elements, filtered (optionally) by a selector.
.nextUntil() After each element is obtained, all peer elements are obtained until the element matching the selector is encountered.
.not() Removes elements from the set of matched elements.
.offsetParent() Gets the control used for positioning 1 The parent element.
.parent() Gets the parent element of each element in the current set of matched elements, filtered (optionally) by a selector.
.parents() Gets the ancestor element of each element in the current set of matched elements, filtered (optionally) by a selector.
.parentsUntil() Gets the ancestor element of each element in the current set of matched elements until the element of the match selector is encountered.
.prev() Gets the first element next to each element in the set of matched elements 1 Six peer elements, filtered by selectors (optional).
.prevAll() Gets all of the peer elements prior to each element in the set of matched elements, filtered (optionally) by a selector.
.prevUntil() Gets all of the peer elements before each element until it encounters the element that matches the selector.
.siblings() Gets the siblings of all the elements in the set of matched elements, filtered (optionally) by a selector.
.slice() Reduces the collection of matched elements to a subset of the specified range.
The use of the each
1. each in array
var arr = [ "one", "two", "three", "four"];
$.each(arr, function(){
alert(this);
});
// The above each The output results are as follows: one,two,three,four
var arr1 = [[1, 4, 3], [4, 6, 6], [7, 20, 9]]
$.each(arr1, function(i, item){
alert(item[0]);
});
// Actually, arr1 for 1 a 2 Dimensional array, item Equivalent to taking per 1 a 1 Dimensional array,
//item[0] As opposed to taking each 1 a 1 The first in an array of dimensions 1 A value
// So this one up here each The outputs are respectively: 1 4 7
var obj = { one:1, two:2, three:3, four:4};
$.each(obj, function(i) {
alert(obj[i]);
});
// this each It's even better. It circulates every time 1 A property
// The output result is: 1 2 3 4
2. Iterate through the Dom elements
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("li").each(function(){
alert($(this).text())
});
});
});
</script>
</head>
<body>
<button> Output the value of each list item </button>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Soda</li>
</ul>
</body>
</html>
Then pop Coffee, Milk, Soda
3. Comparison of each and map
The following example is to get the ID value for each multi-box;
each method:
Define an empty array and add ID value to the array via each method. Finally, after converting the array to a string, the value alert;
$(function(){
var arr = [];
$(":checkbox").each(function(index){
arr.push(this.id);
});
var str = arr.join(",");
alert(str);
})
map method:
Each :checkbox performs return ES42en.id; These return values are automatically saved as jQuery objects, then converted to a native Javascript array using get method, then converted to a string using join method, and finally alert value.
$(function(){
var str = $(":checkbox").map(function() {
return this.id;
}).get().join();
alert(str);
})
The map method is handy when you need an array value.
4. each is used in jquery
Iterate through the array, using both the element index and the content. (i is the index, n is the content)
The code is as follows:
$.each( [0,1,2], function(i, n){
alert( "Item #" + i + ": " + n );
});
Object, using both the member name and the variable content. (i is the member name, n is the variable content)
The code is as follows:
$.each( { name: "John", lang: "JS" }, function(i, n){
alert( "Name: " + i + ", Value: " + n );
});
Example through the dom element, using an input form element as an example.
If you have a piece of code like this in dom
<input name="aaa" type="hidden" value="111" />
<input name="bbb" type="hidden" value="222" />
<input name="ccc" type="hidden" value="333" />
<input name="ddd" type="hidden" value="444"/>
Then you use each as follows
The code is as follows:
$.each($("input:hidden"), function(i,val){
alert(val); // The output [object HTMLInputElement] Because it is 1 Form elements.
alert(i); // Output index is 0 . 1 . 2 . 3
alert(val.name); // The output name The value of the
alert(val.value); // The output value The value of the
});
5. In each, look for elements based on this
The "reply" is displayed only when the mouse cursor passes
<ol class="commentlist">
<li class="comment">
<div class="comment-body">
<p> Hi, the first 1 Layer comments </p>
<div class="reply">
<a href="#" class=".comment-reply-link"> reply </a>
</div>
</div>
<ul class="children">
<li class="comment">
<div class="comment-body">
<p> The first 2 Layer comments </p>
<div class="reply">
<a href="#" class=".comment-reply-link"> reply </a>
</div>
</div></li>
</ul>
</li>
</ol>
The js code is as follows
var arr = [ "one", "two", "three", "four"];
$.each(arr, function(){
alert(this);
});
// The above each The output results are as follows: one,two,three,four
var arr1 = [[1, 4, 3], [4, 6, 6], [7, 20, 9]]
$.each(arr1, function(i, item){
alert(item[0]);
});
// Actually, arr1 for 1 a 2 Dimensional array, item Equivalent to taking per 1 a 1 Dimensional array,
//item[0] As opposed to taking each 1 a 1 The first in an array of dimensions 1 A value
// So this one up here each The outputs are respectively: 1 4 7
var obj = { one:1, two:2, three:3, four:4};
$.each(obj, function(i) {
alert(obj[i]);
});
// this each It's even better. It circulates every time 1 A property
// The output result is: 1 2 3 4
To realize the effect and verify whether all the questions have choices
html
var arr = [ "one", "two", "three", "four"];
$.each(arr, function(){
alert(this);
});
// The above each The output results are as follows: one,two,three,four
var arr1 = [[1, 4, 3], [4, 6, 6], [7, 20, 9]]
$.each(arr1, function(i, item){
alert(item[0]);
});
// Actually, arr1 for 1 a 2 Dimensional array, item Equivalent to taking per 1 a 1 Dimensional array,
//item[0] As opposed to taking each 1 a 1 The first in an array of dimensions 1 A value
// So this one up here each The outputs are respectively: 1 4 7
var obj = { one:1, two:2, three:3, four:4};
$.each(obj, function(i) {
alert(obj[i]);
});
// this each It's even better. It circulates every time 1 A property
// The output result is: 1 2 3 4
js code
var arr = [ "one", "two", "three", "four"];
$.each(arr, function(){
alert(this);
});
// The above each The output results are as follows: one,two,three,four
var arr1 = [[1, 4, 3], [4, 6, 6], [7, 20, 9]]
$.each(arr1, function(i, item){
alert(item[0]);
});
// Actually, arr1 for 1 a 2 Dimensional array, item Equivalent to taking per 1 a 1 Dimensional array,
//item[0] As opposed to taking each 1 a 1 The first in an array of dimensions 1 A value
// So this one up here each The outputs are respectively: 1 4 7
var obj = { one:1, two:2, three:3, four:4};
$.each(obj, function(i) {
alert(obj[i]);
});
// this each It's even better. It circulates every time 1 A property
// The output result is: 1 2 3 4
6. Official explanation
Here's the official explanation:
jQuery.each(object, [callback])
An overview of the
A generic routine traversal method that can be used to iterate over objects and arrays.
Unlike the $().each () method that iterates over an jQuery object, this method can be used for iterating over any object. The callback function takes two arguments: the first is the index of the object's member or array, and the second is the corresponding variable or content. Exiting the each loop causes the callback function to return false, other return values are ignored.
parameter
objectObject
Objects or arrays that need to be iterated.
callback (optional)Function
The callback function executed by each member/element.
This is the end of this article, I hope you enjoy it.