Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
If you want to return all the direct children of selected elements, then use the jQuery.children() method,ExampleYou can try to run the following code to learn how to work with jQuery.children() method in jQuery,Live Demo .myclass * { display: block; border: 2px solid blue; color: black; padding: 3px; margin: 10px; } $(document).ready(function(){ $("ol").children().css({"color": "red", "border": "5px solid red"}); }); body div ol li - This is the child span
If you want to return all next sibling elements, then use the nextAll() method.ExampleYou can try to run the following code to learn how to use the jQuery.nextAll() method:Live Demo .mysiblings * { display: block; border: 1px solid green; padding: 2px; margin: 10px; color: blue; } $(document).ready(function(){ $("li.myclass").nextAll().css({"color": "maroon", "border": "3px solid "}); }); ol li- This is the sibling of parent ol li- This is the sibling of parent ol li- This is the sibling of parent ol with class 'myclass' li- next sibling li- next sibling li- next sibling li- next sibling
The closest() method begins with the current element and returns only the first ancestors matching the passed expression. This returned jQuery object has zero or one element.ExampleYou can try to run the following code to learn how to work with jQuery closest method:Live Demo .myclass * { display: block; border: 2px solid blue; color: red; padding: 5px; margin:10px; } $(document).ready(function(){ $("span").closest("ol").css({"color": "gray", "border": "3px solid yellow"}); }); body div ol - This is the ... Read More
The closest() method begins with the current element and returns only the first ancestors matching the passed expression. This returned jQuery object has zero or one element. Using the class selector is easy and let us see how to use it below.ExampleYou can try to run the following code to learn how to use jQuery.closest() method with class selector:Live Demo .myclass * { display: block; border: 2px solid blue; color: red; padding: 5px; margin:10px; } $(document).ready(function(){ $("span").closest(".one").css({"color": "maroon", "border": "5px solid ... Read More
The end() method reverts the most recent destructive operation, changing the set of matched elements to its previous state right before the destructive operation.ExampleYou can try to run the following code to learn how to work with end function in jQuery:Live Demo jQuery end() function $(document).ready(function(){ $("p").find("span").end().css("border", "2px blue solid"); }); p{ margin:10px; padding:10px; } Hello World!
The jQuery end() method reverts the most recent destructive operation, changing the set of matched elements to its previous state right before the destructive operation.This is how you can use it,operations.end()ExampleYou can try to run the following code to learn about jQuery destructive method end(),Live Demo jQuery end() function $(document).ready(function(){ $("p").find("span").end().css("border", "4px red solid"); }); p{ margin:5px; padding:5px; } Hello World!
The grep() method finds an element and the filter() method returns elements matching a specific criteria.jQuery grep functionExampleThe grep() function is used to find an element of an array. You can try to run the following code to learn how to work with grep(), Live Demo jQuery grep() function div { color: blue; } p { color: red; margin: 0; } var arr1 = [ 1, 7, 4, 8, 6, 1, 9, 5, 3, 7, ... Read More
Use the jQuery find() method to locate descendant elements of particular type of elements in jQuery. The jQuery.find() method will return the descendant elements of the selected element.ExampleYou can try to run the following code to learn how to work with jQuery.find() method,Live Demo .myclass * { display: block; border: 2px solid red; padding: 2px; margin: 10px; color: red; } $(document).ready(function(){ $("ol").find("span").css({"background-color": "blue", "border": "5px solid gray"}); }); body div ol li The descendant element
The jQuery.find() method will return the descendant elements of the selected element.ExampleYou can try to run the following code to learn how to work with jQuery.find() method,Live Demo .myclass * { display: block; border: 2px solid red; padding: 2px; margin: 10px; color: red; } $(document).ready(function(){ $("ol").find("span").css({"background-color": "yellow", "border": "5px solid green"}); }); body div ol li The descendant element
If you want to return an element with a definite index number of the selected elements, then use the eq() method. The first element has index 0, the second element has index 1, etc. Yes, the index number starts at 0.ExampleYou can try to run the following code to learn how to work with jQuery.eq() method,Live Demo $(document).ready(function(){ $("p").eq(3).css("background-color", "gray"); }); Tutorialspoint Free Learning Free Text Tutorials Free Video Tutorials Tutor Connect