What is the difference between find() and children() in jquery?

Difference: The children(selector) method returns all child elements (only children) of each element in the matching element set. The parameters are optional; the find(selector) method returns each element in the matching element set. Descendants of elements (as long as they match, it can be either sons or grandsons), the parameter is required.

Related recommendations: "jQuery Video Tutorial"

.children(selector) method Is to return All child elements of each element in the matching element set (Only the children). Parameters are optional. Adding parameters means filtering through the selector and filtering elements. The

.find(selector) method returns the descendants of each element in the matching element collection. Parameters are required , and can be used to filter elements using selectors, jquery objects, or elements.

.find() is similar to the .children() method, except that it only traverses a single level down the DOM tree. Children here, I understand as sons, are only traversed at the son level. Look at the example:

<ul class="level-1">
	<li class="item-i">I</li>
	<li class="item-ii">II
		<ul class="level-2">不包括自己
			<li class="item-a">A</li>
			<li class="item-b">B
				<ul class="level-3">
					<li class="item-1">1</li>
					<li class="item-2">2</li>
					<li class="item-3">3</li>
				</ul>
			</li>
			<li class="item-c">C</li>
		</ul>
	</li>
	<li class="item-iii">III</li>
</ul>

$('ul.level-2').children().css('background-color', 'red');

The result of this line of code is that items A, B, and C get a red background. Since we didn't apply a selector expression, the returned jQuery object contains all child elements. If a selector is applied, only matching items will be included.

Looking at an example:

<script>
$(document).ready(function(){
    $("#abc").children(".selected").css("color", "blue");
});
</script>
<p id="abc">
	<span>Hello</span>
	<p class="selected">Hello Again</p>
	<p><--换成<p>
		<p class="selected">And Again</p>
		<span class="selected">aaAnd Again</span>
	</p><--换成</p>
	<p>And One Last Time</p>
</p>

The results obtained are as follows:

This is expected The result, but if you replace the above

with

, see the code comments above, the result is:

. Knowledge points to pay attention to in the find() method:

1. Find is to traverse the descendants of each element in the current element collection. As long as they meet the requirements, it doesn't matter whether they are sons or grandsons.

2. Unlike other tree traversal methods, selector expressions are required parameters for .find(). If we need to retrieve all descendant elements, we can pass the wildcard selector '*'.

3. find only traverses the descendants, excluding itself.

4. The selector context is implemented by the .find() method; therefore, $('li.item-ii').find('li') is equivalent to $('li', ' li.item-ii').

The syntax of the selector is: jQuery(selector, [context])

Generally, the usage of jquery selector is as the first parameter. In fact, this usage of the jquery() function can also pass a second parameter. The purpose of passing this parameter is to limit the previous selector to the context environment. By default, that is, if the second parameter is not passed, the selector searches the DOM from the root of the document ($() will search for DOM elements in the current HTML document); if the second parameter is specified, such as a DOM element Set or jquery object, it will be searched in this context.

Let’s look at an example

$("p.foo").click(function() {
    $("span", this).addClass("bar");
});

Since we have limited the span selector to this environment, only the span in the clicked element will get the additional class.

Internally, the selector context is implemented through the .find() method, so $("span", this) is equivalent to $(this).find( "span"), $('li.item-ii').find('li') is equivalent to $('li', 'li.item-ii')

find()For more information, please visit: https://www.php.cn/dic/jquery/find.html

children()For more information, please visit: https: //www.php.cn/dic/jquery/children.html

For more programming-related knowledge, please visit: Programming Video Course! !

The above is the detailed content of What is the difference between find() and children() in jquery?. For more information, please follow other related articles on the PHP Chinese website!