Главная » Деревья

Обход всего дерева jquery

Содержание
  1. .each()
  2. version added: 1.0 .each( function )
  3. Examples:
  4. Demo:
  5. Demo:
  6. Demo:
  7. Books
  8. .children()
  9. .closest()
  10. .find()
  11. .next()
  12. .nextAll()
  13. .nextUntil()
  14. .offsetParent()
  15. .parent()
  16. .parents()
  17. .parentsUntil()
  18. .prev()
  19. .prevAll()
  20. .prevUntil()
  21. .siblings()
  22. Books

.each()

Description: Iterate over a jQuery object, executing a function for each matched element.

version added: 1.0 .each( function )

The .each() method is designed to make DOM looping constructs concise and less error-prone. When called it iterates over the DOM elements that are part of the jQuery object. Each time the callback runs, it is passed the current loop iteration, beginning from 0. More importantly, the callback is fired in the context of the current DOM element, so the keyword this refers to the element.

Suppose you have a simple unordered list on the page:

You can select the list items and iterate across them:

$( "li" ).each(function( index ) 
 console.log( index + ": " + $( this ).text() );
>);

A message is thus logged for each item in the list:

You can stop the loop from within the callback function by returning false .

Note: most jQuery methods that return a jQuery object also loop through the set of elements in the jQuery collection — a process known as implicit iteration. When this occurs, it is often unnecessary to explicitly iterate with the .each() method:

// The .each() method is unnecessary here:
$( "li" ).each(function( ) 
 $( this ).addClass( "foo" );
>);
 
// Instead, you should rely on implicit iteration:
$( "li" ).addClass( "bar" );

Examples:

Iterate over three divs and sets their color property.

html>
html lang="en">
head>
 meta charset="utf-8">
 title>each demo title>
 style> 
 div 
 color: red;
 text-align: center;
 cursor: pointer;
 font-weight: bolder;
 width: 300px;
 >
 style>
 script src="https://code.jquery.com/jquery-3.7.0.js"> script>
 head>
body>
 
div>Click here div>
div>to iterate through div>
div>these divs. div>
 
script> 
$( document.body ).on( "click", function( ) 
 $( "div" ).each( function( i ) 
 if ( this.style.color !== "blue" ) 
 this.style.color = "blue";
 > else 
 this.style.color = "";
 >
 > );
> );
 script>
 
 body>
 html>

Demo:

To access a jQuery object instead of the regular DOM element, use $( this ) . For example:

html>
html lang="en">
head>
 meta charset="utf-8">
 title>each demo title>
 style> 
 ul 
 font-size: 18px;
 margin: 0;
 >
 span 
 color: blue;
 text-decoration: underline;
 cursor: pointer;
 >
 .example 
 font-style: italic;
 >
 style>
 script src="https://code.jquery.com/jquery-3.7.0.js"> script>
 head>
body>
 
To do list: span>(click here to change) span>
ul>
 li>Eat li>
 li>Sleep li>
 li>Be merry li>
 ul>
 
script> 
$( "span" ).on( "click", function( ) 
 $( "li" ).each(function( ) 
 $( this ).toggleClass( "example" );
 >);
>);
 script>
 
 body>
 html>

Demo:

Use return false to break out of each() loops early.

html>
html lang="en">
head>
 meta charset="utf-8">
 title>each demo title>
 style> 
 div 
 width: 40px;
 height: 40px;
 margin: 5px;
 float: left;
 border: 2px blue solid;
 text-align: center;
 >
 span 
 color: red;
 >
 style>
 script src="https://code.jquery.com/jquery-3.7.0.js"> script>
 head>
body>
 
button>Change colors button>
span> span>
div> div>
div> div>
div> div>
div> div>
div id="stop">Stop here div>
div> div>
div> div>
div> div>
 
script> 
$( "button" ).on( "click", function( ) 
 $( "div" ).each(function( index, element ) 
 // element == this
 $( element ).css( "backgroundColor", "yellow" );
 if ( $( this ).is( "#stop" ) ) 
 $( "span" ).text( "Stopped at div index #" + index );
 return false;
 >
 >);
>);
 script>
 
 body>
 html>

Demo:

  • Ajax
    • Global Ajax Event Handlers
    • Helper Functions
    • Low-Level Interface
    • Shorthand Methods
    • Deprecated 1.3
    • Deprecated 1.7
    • Deprecated 1.8
    • Deprecated 1.9
    • Deprecated 1.10
    • Deprecated 3.0
    • Deprecated 3.2
    • Deprecated 3.3
    • Deprecated 3.4
    • Deprecated 3.5
    • Basics
    • Custom
    • Fading
    • Sliding
    • Browser Events
    • Document Loading
    • Event Handler Attachment
    • Event Object
    • Form Events
    • Keyboard Events
    • Mouse Events
    • Class Attribute
    • Copying
    • DOM Insertion, Around
    • DOM Insertion, Inside
    • DOM Insertion, Outside
    • DOM Removal
    • DOM Replacement
    • General Attributes
    • Style Properties
    • Collection Manipulation
    • Data Storage
    • DOM Element Methods
    • Setup Methods
    • Properties of jQuery Object Instances
    • Properties of the Global jQuery Object
    • Attribute
    • Basic
    • Basic Filter
    • Child Filter
    • Content Filter
    • Form
    • Hierarchy
    • jQuery Extensions
    • Visibility Filter
    • Filtering
    • Miscellaneous Traversing
    • Tree Traversal
    • Version 1.0
    • Version 1.0.4
    • Version 1.1
    • Version 1.1.2
    • Version 1.1.3
    • Version 1.1.4
    • Version 1.2
    • Version 1.2.3
    • Version 1.2.6
    • Version 1.3
    • Version 1.4
    • Version 1.4.1
    • Version 1.4.2
    • Version 1.4.3
    • Version 1.4.4
    • Version 1.5
    • Version 1.5.1
    • Version 1.6
    • Version 1.7
    • Version 1.8
    • Version 1.9
    • Version 1.11 & 2.1
    • Version 1.12 & 2.2
    • Version 3.0
    • Version 3.1
    • Version 3.2
    • Version 3.3
    • Version 3.4
    • Version 3.5
    • Version 3.6
    • Version 3.7

    Books

    Copyright 2023 OpenJS Foundation and jQuery contributors. All rights reserved. See jQuery License for more information. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them. OpenJS Foundation Terms of Use, Privacy, and Cookie Policies also apply. Web hosting by Digital Ocean | CDN by StackPath

    Источник

    .children()

    Get the children of each element in the set of matched elements, optionally filtered by a selector.

    .closest()

    For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.

    .find()

    Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.

    .next()

    Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.

    .nextAll()

    Get all following siblings of each element in the set of matched elements, optionally filtered by a selector.

    .nextUntil()

    Get all following siblings of each element up to but not including the element matched by the selector, DOM node, or jQuery object passed.

    .offsetParent()

    Get the closest ancestor element that is positioned.

    .parent()

    Get the parent of each element in the current set of matched elements, optionally filtered by a selector.

    .parents()

    Get the ancestors of each element in the current set of matched elements, optionally filtered by a selector.

    .parentsUntil()

    Get the ancestors of each element in the current set of matched elements, up to but not including the element matched by the selector, DOM node, or jQuery object.

    .prev()

    Get the immediately preceding sibling of each element in the set of matched elements. If a selector is provided, it retrieves the previous sibling only if it matches that selector.

    .prevAll()

    Get all preceding siblings of each element in the set of matched elements, optionally filtered by a selector, in the reverse document order.

    .prevUntil()

    Get all preceding siblings of each element up to but not including the element matched by the selector, DOM node, or jQuery object.

    .siblings()

    Get the siblings of each element in the set of matched elements, optionally filtered by a selector.

Оцените статью
© 2024 Деревья и растения