Heim >Web-Frontend >js-Tutorial >Wie kann ich mit jQuery/JavaScript überprüfen, ob zwei Elemente gleich sind?

Wie kann ich mit jQuery/JavaScript überprüfen, ob zwei Elemente gleich sind?

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBnach vorne: 2023-08-27 16:13:021205Durchsuche

如何使用 jQuery/JavaScript 检查两个元素是否相同？

Wir können mit verschiedenen Methoden in Vanilla JavaScript oder jQuery (einer JavaScript-Spezialbibliothek) auf HTML-Elemente zugreifen.

Manchmal müssen Entwickler nach dem Zugriff auf ein DOM-Element überprüfen, ob die beiden Elemente, auf die zugegriffen wurde, identisch sind. In diesem Tutorial lernen wir, den strikten Gleichheitsoperator von JavaScript und die Methoden von jQuery zu verwenden, um die Gleichheit zweier HTML-Elemente zu überprüfen.

Verwendung des Gleichheitsoperators (==) in JavaScript

Wir können über getElemenetById, querySelector, getElementByClassName und andere Methoden auf HTML-Elemente zugreifen. Anschließend können wir dies in JavaScript-Variablen speichern und diese Variablen mit dem Gleichheitsoperator vergleichen, um die Gleichheit zweier Elemente zu überprüfen, genau wie wir ihn zum Vergleichen zweier Zahlen oder Stringwerte verwenden.

Grammatik

Benutzer können der folgenden Syntax folgen, um zwei HTML-Elemente zu vergleichen.

if (element1 == element2) {
   // elements are the same
} else {
   // elements are not the same
}

In der obigen Syntax sind element1 und element2 HTML-Elemente, auf die vom DOM aus mit JavaScript zugegriffen wird.

Beispiel

In diesem Beispiel haben wir das

HTML-Element erstellt und das id-Attribut mit dem Wert „test“ hinzugefügt. Danach greifen wir mithilfe der Methode document.getElementById() über die ID auf das

-Element zu. Die Variablen element1 und element2 enthalten dieselben Elemente.

Danach vergleichen wir sie mithilfe des Gleichheitsoperators und der Benutzer kann die Ausgabe beobachten.

<html>
<body>
   <h3>Using the <i>Equality operator</i> to check if two HTML elements are the same or not.</h3>
   <h4 id = "test"> This is a sample element!</h4>
   <p id = "output"></p>
   <script>
      let output = document.getElementById("output");
      let element1 = document.getElementById("test");
      let element2 = document.getElementById("test");

      if (element1 == element2) {
         output.innerHTML += "The element1 and element2 both are same.";
      } else {
         output.innerHTML += "The element1 and element2 both are not same!";
      }
   </script>
</body>
</html>

Beispiel

In diesem Beispiel haben wir das Element mit dem Tag

erstellt. Als Nächstes greifen wir mit der Methode document.getElementByTagName() über den Tag-Namen auf das HTML-Element zu. Es gibt ein Array aller HTML-Elemente mit dem

-Tag zurück.

Danach vergleichen wir die Werte am 0^ten und am 1^sten Index des Elements-Arrays, und der Benutzer kann in der Ausgabe sehen, dass beide unterschiedlich sind.

<html>
<body>
   <h3>Using the <i>Equality operator</i> to check if two HTML elements are the same or not.</h3>
   <h4>This is a element1!</h4>
   <h4>This is a element2!</h4>
   <p id = "output"> </p>
   <script>
      let output = document.getElementById("output");
      let elements = document.getElementsByTagName("h3");
      if (elements[0] == elements[1]) {
         output.innerHTML += "The element1 and element2 both are same.";
      } else {
         output.innerHTML += "The element1 and element2 both are not same!";
      }
   </script>
</body>
</html>

Verwenden Sie die is()-Methode von jQuery

jQuery enthält verschiedene Methoden zum Bearbeiten von DOM-Elementen. Die Methode is() verwendet ein Element als Parameter und ein anderes Element als Referenz und vergleicht die beiden Elemente.

Außerdem müssen Benutzer die Notation „$“ verwenden, um auf Elemente in jQuery zuzugreifen, bevor sie die Methode is() verwenden.

Grammatik

Benutzer können die Methode is() gemäß der folgenden Syntax verwenden, um zu überprüfen, ob zwei HTML-Elemente gleich sind.

let isEqual = $("#btn1").is($("#btn2"));

In der obigen Syntax haben wir über die ID auf die Elemente „btn1“ und „btn2“ zugegriffen.

Beispiel

In diesem Beispiel haben wir jQuery CDN hinzugefügt, um jQuery im HTML-Code zu verwenden. Wir haben außerdem zwei Schaltflächen mit unterschiedlichen IDs erstellt.

In JavaScript verwenden wir die Methode is(), übergeben das Element mit der ID „btn2“ als Parameter und nehmen das Element mit der ID „btn1“ als Referenz. Die Methode is() vergleicht zwei Elemente und gibt den booleschen Wert zurück, den wir in der Variablen isEqual speichern.



   


    Using the is() method of JQuery to check if two HTML elements are same or not.
   
   
    
   <script>
      let output = document.getElementById("output");
      let isEqual = $(&quot;#btn1&quot;).is($(&quot;#btn2&quot;));
      if (isEqual) {
         output.innerHTML += "The element1 and element2 both are same.";
      } else {
         output.innerHTML += "The element1 and element2 both are not same!";
      }
   </script>

Wir haben verschiedene Möglichkeiten kennengelernt, zwei HTML-Elemente zu vergleichen. Benutzer können reines JavaScript oder die is()-Methode von jQuery verwenden. Darüber hinaus können Benutzer verschiedene Methoden verwenden, um auf HTML-Elemente zuzugreifen und diese zu vergleichen.

Das obige ist der detaillierte Inhalt vonWie kann ich mit jQuery/JavaScript überprüfen, ob zwei Elemente gleich sind?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript jquery html 运算符字符串 dom

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Was sind Dekoratoren und wie werden sie in JavaScript verwendet?Nächster Artikel：Was sind Dekoratoren und wie werden sie in JavaScript verwendet?

In Verbindung stehende Artikel

Mehr sehen