Home >Web Front-end >JS Tutorial >Traversing using jQuery

Traversing using jQuery

PHPzOriginal: 2023-09-02 11:37:03850browse

Difference between find() and filter() methods

filter() The method is used to filter the current set of elements contained in the wrapper set. Its use should be reserved for tasks that require filtering a selected set of elements. For example, the following code will filter for three  elements contained in the wrapper set.

<!DOCTYPE html>
<html lang="en">
<body>
    <p><strong>first</strong></p>
    <p>middle</p>
    <p><strong>last</strong></p>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>  (function ($) {  // Alerts middle, by filtering out the first
      // and last <p> elements in the wrapper set.
      alert($('p').filter(':not(:first):not(:last)').text());
  })(jQuery); </script>
</body>
</html>

Note: When using filter(), always ask yourself if it is absolutely necessary. For example, $('p').filter(':not(:first):not(:last)') You don’t need to write filter()$('p:not (:first) :not(:last)').

On the other hand, the find() method can be used to further find the descendants of the currently selected element. Think of find() more like updating or changing the current wrapped set with the new element wrapped in the already selected element. For example, the following code will use find() to change the wrapper set from  elements to two  elements.

<!DOCTYPE html>
<html lang="en">
<body>
    <p><strong>first</strong></p>
    <p>middle</p>
    <p><strong>last</strong></p>
    <script src="https://img.php.cn/"></script>
    <script>  (function ($) {
      // Alerts "strong"
      alert($('p').find('strong').get(0).nodeName);
  })(jQuery); </script>
</body>
</html>

Note: In fact, you can use andSelf() to combine the elements in the wrapper before using the find() method with the current element - For example $('p').find('strong').andSelf().

The concept to take away is that filter() will only reduce (or filter) the currently selected elements in the wrapper set, while find() can actually create a set Brand new packaging elements.

Note: find() and filter() are both destructive methods and can be undone using end(). This Will restore the wrapped collection to its state before using find() or filter().

Pass function to filter() instead of expression

Before running and creating a custom filter for selecting elements, it might make more sense to simply pass a function to the traversal filter() method that allows you to check each element in the wrapper set A specific value scenario for an element.

For example, suppose you want to wrap all <img alt="Traversing using jQuery" > elements in an HTML page within a  element that is not currently wrapped with that element.

You can create a custom filter to accomplish this, or you can use the filter() method, passing it a function that will determine if the element's parent element is ## The # element, if not, removes that element from the collection before wrapping the remaining elements in the collection with <img alt="Traversing using jQuery" > elements.

In the example below, I select each

<img alt="Traversing using jQuery" > element in the HTML page and then pass the filter() method a function that iterates over each element (Using this) In the wrapper set, checks whether the parent element of the <img alt="Traversing using jQuery" > element is the  element. 

<!DOCTYPE html>
<html lang="en">
<body>
    <img>
    <img>
    <p>
        <img>
    </p>
    <img>
    <p>
        <img>
    </p>
    <script src="https://img.php.cn/"></script>
    <script>  (function ($) {
      $('img').attr('src', 'http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif').filter(function () { return !$(this).parent('p').length == 1 }).wrap('<p></p>');
  })(jQuery); </script>
</body>
</html>

Please note that I am using the

! operator to change the boolean value true to false. This is because I want to remove the  element from a collection that has the <img alt="Traversing using jQuery" > element as its parent. The function passed to the filter() method simply removes elements from the collection if the function returns false.

The main point is that if you are dealing with an isolated case, create a custom filter - for example

:findImgWithNoP - a single case can be customized by simply passing a function to the filter method to avoid. This concept is very powerful. Consider what might happen when we combine regular expression testing with the filter() method.

<!DOCTYPE html>
<html lang="en">
<body>
    <ul>
        <li>jQuery is great.</li>
        <li>It's lightweight.</li>
        <li>Its free!</li>
        <li>jQuery makes everything simple.</li>
    </ul>
    <script src="https://img.php.cn/"></script>
    <script>  (function($){ 
      // Wrap a <strong> element around any text within
      // a <li> that contains the pattern "jQuery"
      var pattern = /jQuery/i;
      $('ul li').filter(function () { return pattern.test($(this).text()); }).wrap('<strong></strong>');
  })(jQuery); </script>
</body>
</html>

Traverse the DOM upward

You can easily traverse the DOM to ancestor elements using the

parent(), parents() and closest() methods. It is crucial to understand the differences between these methods. Check out the code below and make sure you understand the differences between these jQuery traversal methods.

<!DOCTYPE html>
<html lang="en">
<body>
    <div id="parent2">
        <div id="parent1">
            <div id="parent0">
                <div id="start"></div>
            </div>
        </div>
    </div>
 
    <script src="https://img.php.cn/"></script>
    <script>  (function ($) {
      // Alerts "parent0" x4
      alert($('#start').parent().attr('id'));
      alert($('#start').parents('#parent0').attr('id'));
      alert($('#start').parents()[0].id);
      // Gets actual DOM element
      alert($('#start').closest('#parent0').attr('id'));
      // Alerts "parent1" x4
      alert($('#start').parent().parent().attr('id'));
      alert($('#start').parents('#parent1').attr('id'));
      alert($('#start').parents()[1].id);
      // Gets actual DOM element
      alert($('#start').closest('#parent1').attr('id'));
      // Alerts "parent2" x4
      alert($('#start').parent().parent().parent().attr('id'));
      alert($('#start').parents('#parent2').attr('id'));
      alert($('#start').parents()[2].id);
      // Gets actual DOM element
      alert($('#start').closest('#parent2').attr('id'));
  })(jQuery); </script>
</body>
</html>

Note: closest() and parents() may appear to have the same functionality, but closest() actually Will include the currently selected element in its filter.

closest() stops the traversal once a match is found, while parents() gets all parents and then filters your optional selector. Therefore, closest() can only return at most one element.

Traversal methods accept CSS expressions as optional parameters

CSS expressions can be passed not only to jQuery functions to select elements, but also to multiple traversal methods. It can be easy to forget this, because many traversal methods do not require the use of any expressions at all - for example

next(). For the following traversal methods, expressions are optional, but remember that you Optionally provide an expression for filtering.

children('expression')
next('expression')
nextAll('expression')
parent('expression')
Parent('expression')
prev('expression')
prevAll('expression')
siblings('expression')
closest('expression')

The above is the detailed content of Traversing using jQuery. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Getting Started: Understanding the WordPress Customizer JavaScript APINext article：Getting Started: Understanding the WordPress Customizer JavaScript API

See more

Traversing using jQuery

Difference between find() and filter() methods

Pass function to filter() instead of expression

Related articles