Maison > Article > interface Web > Traversée à l'aide de jQuery

Traversée à l'aide de jQuery

PHPzoriginal: 2023-09-02 11:37:03831parcourir

Différence entre les méthodes find() et filter()

La méthode

filter() 方法用于过滤包装器集中包含的当前元素集。它的使用应该留给需要过滤一组已选择的元素的任务。例如，下面的代码将过滤包装集中包含的三个  est utilisée pour filtrer l'ensemble actuel d'éléments contenus dans l'ensemble wrapper. Son utilisation doit être réservée aux tâches qui nécessitent de filtrer un ensemble sélectionné d'éléments. Par exemple, le code suivant filtrera trois éléments

contenus dans l'ensemble de wrapper.

<!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>

Remarque : filter() 时，总是问自己是否绝对有必要。例如， $('p').filter(':not(:first):not(:last)') 可以不写 filter()Lors de l'utilisation de

$('p:not(:first) :not(:last)').

find() 方法可用于进一步查找当前所选元素的后代。认为 find() 更像是使用封装在已选择的元素中的新元素来更新或更改当前的包装集。例如，下面的代码将使用 find() 将包装集从  元素更改为两个 D'autre part, la méthode find() peut être utilisée pour rechercher davantage les descendants de l'élément actuellement sélectionné. Pensez à find() plus comme à la mise à jour ou à la modification de l'ensemble encapsulé actuel avec un nouvel élément encapsulé dans l'élément sélectionné. Par exemple, le code suivant utilisera find() pour changer l'ensemble de wrapper d'un élément

à deux éléments .
<!DOCTYPE html> <html lang="en"> <body> first middle last <script src="https://img.php.cn/"></script> <script> (function ($) { // Alerts "strong" alert($('p').find('strong').get(0).nodeName); })(jQuery); </script> </body> </html>
andSelf() 将使用 find() 方法之前的包装器中的元素与当前元素组合起来 - 例如$('p').find('strong').andSelf()Remarque : En fait, vous pouvez utiliser

.filter() 只会减少（或过滤）包装器集中当前选定的元素，而 find() Le concept à retenir est que

il est réellement possible de créer un tout nouvel ensemble d’éléments d’emballage. find() 和 filter() 都是破坏性方法，可以使用 end() 撤消，这会将包装的集合恢复为使用 find() 或 filter()Remarque :

<hr> Statut précédent.

Passez la fonction à filter() au lieu d'expressionfilter()

Avant d'exécuter et de créer un filtre personnalisé pour sélectionner des éléments, il peut être plus logique de simplement transmettre une fonction à la méthode traversal

qui vous permet de vérifier chaque élément de l'ensemble de wrapper pour un scénario de valeur spécifique. <img alt="Traversée à l'aide de jQuery" > 元素包装在当前未使用该元素包装的 

Par exemple, supposons que vous souhaitiez envelopper tous les éléments <img alt="Traversée à l'aide de jQuery" > d'une page HTML dans un élément  qui n'est pas actuellement encapsulé avec cet élément. filter() 方法，向其传递一个函数，该函数将确定该元素的父元素是否为  元素，如果否，则在使用  元素包装集合中剩余的 <img alt="Traversée à l'aide de jQuery" > Vous pouvez créer un filtre personnalisé pour accomplir cela, ou vous pouvez utiliser la méthode

, en lui passant une fonction qui déterminera si l'élément parent de cet élément est un élément <img alt="Traversée à l'aide de jQuery" > 元素，然后向 filter() 方法传递一个用于迭代每个元素的函数（使用 this ) 在包装器集中，检查 <img alt="Traversée à l'aide de jQuery" > 元素的父元素是否为 , et sinon, supprimez l'élément de la collection avant d'envelopper les éléments <img alt="Traversée à l'aide de jQuery" > restants de la collection avec des éléments

! 运算符将布尔值 true 更改为 false。这是因为我想从以  元素作为父元素的集合中删除 <img alt="Traversée à l'aide de jQuery" > 元素。如果函数返回 false，则传递给 filter()Dans l'exemple ci-dessous, je sélectionne chaque élément <img alt="Traversée à l'aide de jQuery" > dans la page HTML, puis je passe à la méthode

une fonction qui parcourt chaque élément (en utilisant this ) Dans le wrapper set, vérifie si le parent de l'élément <img alt="Traversée à l'aide de jQuery" > est un élément . :findImgWithNoP - 对于单一情况可以通过简单地向filter方法传递一个可以进行自定义过滤的函数来避免。这个概念非常强大。考虑一下当我们将正则表达式测试与 filter()

<!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>

Veuillez noter que j'utilise l'opérateur ! pour changer la valeur booléenne true en false. En effet, je souhaite supprimer l'élément <img alt="Traversée à l'aide de jQuery" > de la collection qui a l'élément <hr> comme parent. La fonction passée à la méthode

supprime simplement les éléments de la collection si la fonction renvoie false.

Le fait est que si vous avez affaire à un cas isolé, créez un filtre personnalisé - par exemple, évitez. Ce concept est très puissant. Considérez ce qui pourrait arriver lorsque nous combinons les tests d'expressions régulières avec la méthode parent()、parents() 和 closest().

<!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>

Traversez le DOM closest() 和 parents() 可能看起来具有相同的功能，但 closest()Vous pouvez facilement parcourir le DOM jusqu'aux éléments ancêtres en utilisant la méthode

. Il est crucial de comprendre les différences entre ces méthodes. Consultez le code ci-dessous et assurez-vous de bien comprendre les différences entre ces méthodes de traversée jQuery.

<!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>

Remarque :

inclura en fait l'élément actuellement sélectionné dans son filtrage.closest() 一旦找到匹配项就会停止遍历，而 parents() 会获取所有父级，然后过滤您的可选选择器。因此，closest()

<hr>

next() Un seul élément peut être restitué au maximum.

🎜 🎜La méthode traversal accepte les expressions CSS comme paramètres facultatifs🎜 🎜Les expressions CSS peuvent être transmises non seulement aux fonctions jQuery pour sélectionner des éléments, mais également à plusieurs méthodes de traversée. Il peut être facile d'oublier cela, car de nombreuses méthodes de parcours ne nécessitent l'utilisation d'aucune expression - par exemple 🎜 Pour les méthodes de parcours suivantes, les expressions sont facultatives, mais n'oubliez pas que vous pouvez choisir de fournir une expression pour le mode de filtrage. . 🎜

children('表达式')
next('表达式')
nextAll('表达式')
parent('表达式')
父母（'表达'）
prev('表达式')
prevAll('表达式')
siblings('表达式')
closest('表达式')

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Premiers pas : Comprendre l'API JavaScript de WordPress CustomizerArticle suivant：Premiers pas : Comprendre l'API JavaScript de WordPress Customizer

Articles Liés

Voir plus