How to use jQuery traversal add method

<p>jQuery traversal add method

<p>jQuery is a popular JavaScript library that encapsulates many functions commonly used by developers, making JavaScript development simpler and more efficient. One of them is the ability to traverse DOM elements.

<p>In jQuery, you can traverse elements in a document in a variety of ways. One way is to use the .add() method.

What is the add method

<p>.add() The method is the method used by jQuery to merge two or more collections. It adds elements from one collection to another collection. The new set includes all elements in the original set plus new elements.

<p>.add() The method can accept multiple parameters, each of which is a CSS selector, a DOM element, or a set of DOM elements. These parameters will be added to the original collection.

<p>Consider the following HTML structure:

<div class="box">
  <p>这里是段落1</p>
</div>
<div class="box">
  <p>这里是段落2</p>
</div>

<p>To select all <p> elements and <div> elements, and then add them To a new collection, you can use the .add() method like this:

var $newCollection = $('p').add('div');

<p>Now, $newCollection will contain all <p> and <div> elements.

Traverse DOM elements

<p>The jQuery traversal function returns a jQuery object containing the DOM elements that match the given selector. These functions can filter collections, search for subelements, and find matching DOM elements.

<p>The following are the most commonly used jQuery traversal methods:

• .children(): Returns a collection of child elements of the matching element.
• .parent(): Returns the direct parent element of the matching element.
• .siblings(): Returns the set of sibling elements of the matching element.
• .next(): Returns the next sibling element of the matching element.
• .prev(): Returns the previous sibling element of the matching element.

<p>The collection of DOM elements returned by these methods can be further traversed or processed using other jQuery methods.

<p>The following example demonstrates how to use the .siblings() method to find all sibling elements with the class name .red:

<div class="box">
  <div class="red">红色盒子</div>
  <div>白色盒子1</div>
  <div>白色盒子2</div>
</div>
<div class="box">
  <div class="red">红色盒子2</div>
  <div>白色盒子3</div>
  <div>白色盒子4</div>
</div>

$(document).ready(function() {
  $('.red').siblings().css('background-color', 'gray');
});

<p>This Example sets the background color of all siblings of the .red element to gray.

Summary

<p>jQuery provides many methods for traversing DOM elements to conveniently manipulate HTML and CSS. .add() The method can merge two or more element collections.

<p>The above is a brief introduction to jQuery traversal and .add() method, I hope it will be helpful to you.

The above is the detailed content of How to use jQuery traversal add method. For more information, please follow other related articles on the PHP Chinese website!