These methods are used to select the child node of the matched elements.
- find()- A find() function searches the whole DOM (document object model) below the current node,i.e., search through the matched elements child, grandchild, great-grandchildany levels down and construct a new JQuery object from the matching elements.
- children ()-children () function looks for the immediate children just a single level down. That's why the children() is faster than find().
See the below examples to understand the difference between find() and children():-
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>find demo</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p><span>Hi</span>, what are you doing?</p>
<p> I'm <span>working</span>.</p>
<script>
$(document).ready(function(){
$( "p" ).find( "span" ).css( "color", "red" );
});
</script>
</body>
</html>
In this example, all the content inside the span tag (which is inside p tag) will be displayed in red color.
<html>
<head>
<title>children demo</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("div").children(".first").addClass("orange");
});
</script>
<style>
.orange { color:orange; }
</style>
</head>
<body>
<div>
<span>Hello</span>
<p class="first">Hello everyone</p>
<div class="first">And how are you</div>
<p class="second">And what are you doing</p>
</div>
</body>
</html>
This would apply blue color to all children with a class "first" of each div.
Therefore,there isn't much performance difference in typical cases.Which one to use depends on which elements and what levels you want to traverse down in the DOM. Use any method according to the result you desire.
0 Comment(s)