Heim > Artikel > Web-Frontend > Durchqueren mit jQuery

Durchqueren mit jQuery

PHPzOriginal: 2023-09-02 11:37:03829Durchsuche

Unterschied zwischen den Methoden find() und filter()

Die

filter() 方法用于过滤包装器集中包含的当前元素集。它的使用应该留给需要过滤一组已选择的元素的任务。例如，下面的代码将过滤包装集中包含的三个 -Methode wird verwendet, um den aktuellen Satz von Elementen zu filtern, der im Wrapper-Satz enthalten ist. Seine Verwendung sollte Aufgaben vorbehalten sein, die das Filtern eines ausgewählten Satzes von Elementen erfordern. Der folgende Code filtert beispielsweise drei

-Elemente, die im Wrapper-Set enthalten sind.

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

Hinweis: filter() 时，总是问自己是否绝对有必要。例如， $('p').filter(':not(:first):not(:last)') 可以不写 filter()Bei Verwendung von

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

find() 方法可用于进一步查找当前所选元素的后代。认为 find() 更像是使用封装在已选择的元素中的新元素来更新或更改当前的包装集。例如，下面的代码将使用 find() 将包装集从  元素更改为两个 Andererseits kann die Methode find() verwendet werden, um die Nachkommen des aktuell ausgewählten Elements weiter zu finden. Stellen Sie sich find() eher so vor, als würden Sie den aktuell umschlossenen Satz mit einem neuen Element umschließen oder ändern, das in das ausgewählte Element eingeschlossen ist. Der folgende Code verwendet beispielsweise find(), um den Wrapper-Satz von einem

-Element in zwei -Elemente zu ändern.
<!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()HINWEIS: Eigentlich können Sie

.filter() 只会减少（或过滤）包装器集中当前选定的元素，而 find() verwenden Das Konzept zum Mitnehmen besteht darin, dass

es tatsächlich möglich ist, eine ganz neue Reihe von Verpackungselementen zu erstellen. find() 和 filter() 都是破坏性方法，可以使用 end() 撤消，这会将包装的集合恢复为使用 find() 或 filter()Hinweis:

<hr> Vorheriger Status.

Übergeben Sie die Funktion an filter() anstelle von expressionfilter()

Bevor Sie einen benutzerdefinierten Filter zum Auswählen von Elementen ausführen und erstellen, ist es möglicherweise sinnvoller, einfach eine Funktion an die Traversal-Methode

zu übergeben, mit der Sie jedes Element im Wrapper-Set auf ein bestimmtes Werteszenario überprüfen können. <img alt="Durchqueren mit jQuery" > 元素包装在当前未使用该元素包装的 

Angenommen, Sie möchten alle <img alt="Durchqueren mit jQuery" >-Elemente in einer HTML-Seite in ein -Element einschließen, das derzeit nicht mit diesem Element umschlossen ist. filter() 方法，向其传递一个函数，该函数将确定该元素的父元素是否为  元素，如果否，则在使用  元素包装集合中剩余的 <img alt="Durchqueren mit jQuery" > Sie können einen benutzerdefinierten Filter erstellen, um dies zu erreichen, oder Sie können die Methode

verwenden und ihr eine Funktion übergeben, die bestimmt, ob das übergeordnete Element dieses Elements ein <img alt="Durchqueren mit jQuery" > 元素，然后向 filter() 方法传递一个用于迭代每个元素的函数（使用 this ) 在包装器集中，检查 <img alt="Durchqueren mit jQuery" > 元素的父元素是否为 -Element ist, und wenn nicht, entfernen Sie es das Element aus der Sammlung, bevor die verbleibenden <img alt="Durchqueren mit jQuery" >-Elemente in der Sammlung mit

-Elementen umschlossen werden.

! 运算符将布尔值 true 更改为 false。这是因为我想从以  元素作为父元素的集合中删除 <img alt="Durchqueren mit jQuery" > 元素。如果函数返回 false，则传递给 filter()Im folgenden Beispiel wähle ich jedes <img alt="Durchqueren mit jQuery" >-Element in der HTML-Seite aus und übergebe dann der

-Methode eine Funktion, die jedes Element durchläuft (unter Verwendung von this ). Wrapper-Set, prüft, ob das übergeordnete Element des <img alt="Durchqueren mit jQuery" >-Elements ein -Element ist. :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>

Bitte beachten Sie, dass ich den Operator ! verwende, um den booleschen Wert „true“ in „false“ zu ändern. Das liegt daran, dass ich das Element <img alt="Durchqueren mit jQuery" > aus der Sammlung entfernen möchte, deren übergeordnetes Element das Element <hr> ist. Die an die

-Methode übergebene Funktion entfernt einfach Elemente aus der Sammlung, wenn die Funktion „false“ zurückgibt.

Der Punkt ist, wenn Sie es mit einem Einzelfall zu tun haben, erstellen Sie einen benutzerdefinierten Filter – z. B. „vermeiden“. Dieses Konzept ist sehr wirkungsvoll. Überlegen Sie, was passieren könnte, wenn wir das Testen regulärer Ausdrücke mit der parent()、parents() 和 closest()-Methode kombinieren.

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

Durchqueren Sie das DOM closest() 和 parents() 可能看起来具有相同的功能，但 closest()Mit der

-Methode können Sie das DOM problemlos zu Vorgängerelementen durchqueren. Es ist wichtig, die Unterschiede zwischen diesen Methoden zu verstehen. Schauen Sie sich den Code unten an und stellen Sie sicher, dass Sie die Unterschiede zwischen diesen jQuery-Traversal-Methoden verstehen.

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

Hinweis:

wird tatsächlich das aktuell ausgewählte Element in seine Filterung einbeziehen.closest() 一旦找到匹配项就会停止遍历，而 parents() 会获取所有父级，然后过滤您的可选选择器。因此，closest()

<hr>

next() Es kann höchstens ein Element zurückgegeben werden.

🎜 🎜Die Traversal-Methode akzeptiert CSS-Ausdrücke als optionale Parameter🎜 🎜CSS-Ausdrücke können nicht nur an jQuery-Funktionen zur Auswahl von Elementen übergeben werden, sondern auch an mehrere Traversal-Methoden. Dies kann leicht vergessen werden, da viele Durchlaufmethoden überhaupt keine Ausdrücke erfordern – zum Beispiel 🎜 Für die folgenden Durchlaufmethoden sind Ausdrücke optional, aber denken Sie daran, dass Sie optional einen Ausdruck für den Filtermodus angeben können. 🎜

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

Das obige ist der detaillierte Inhalt vonDurchqueren mit jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Erste Schritte: Die WordPress Customizer JavaScript API verstehenNächster Artikel：Erste Schritte: Die WordPress Customizer JavaScript API verstehen

In Verbindung stehende Artikel

Mehr sehen