search

Home >Web Front-end >JS Tutorial >How to check if two elements are the same using jQuery/JavaScript?

How to check if two elements are the same using jQuery/JavaScript?

WBOY
WBOYforward
2023-08-27 16:13:021163browse

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

We can access HTML elements using various methods in vanilla JavaScript or jQuery (a JavaScript specialty library).

Sometimes, after accessing a DOM element, developers may need to check whether the two accessed elements are the same. In this tutorial, we will learn to use JavaScript's strict equality operator and jQuery's methods to check the equality of two HTML elements.

Using the equality operator (==) in JavaScript

We can access HTML elements through getElemenetById, querySelector, getElementByClassName and other methods. Afterwards, we can store this in JavaScript variables and these variables can be compared using the equality operator to check the equality of two elements, just like we use it to compare two numbers or string values.

grammar

Users can compare two HTML elements according to the following syntax. 

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

In the above syntax, element1 and element2 are HTML elements accessed from the DOM using JavaScript.

Example

In this example, we created the

HTML element and added the id attribute with the value "test". After that, we access the

element by id using the document.getElementById() method. element1 and element2 variables contain the same elements.

After that, we use equality operator to compare them and the user can observe the output. 

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

Example

In this example, we created the element using the

tag. Next, we access the HTML element by tag name using the document.getElementByTagName() method. It returns an array of all HTML elements with

tags.

Afterwards, we compare the values ​​of the 0th and 1st indexes of the elements array, and the user can see in the output that they are both different. 

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

Use jQuery’s is() method

jQuery Contains various methods for manipulating DOM elements. The is() method takes one element as a parameter and another element as a reference, and compares the two elements.

In addition, users need to use the "$" notation to access elements in jQuery before using the is() method.

grammar

Users can use the is() method according to the following syntax to check whether two HTML elements are equal. 

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

In the above syntax, we accessed the "btn1" and "btn2" elements by id.

Example

In this example, we added the jQuery CDN to use jQuery in HTML code. We also created two buttons with different IDs.

In JavaScript, we use the is() method, passing the element with id "btn2" as a parameter, and using the element with id "btn1" as a reference. The is() method compares two elements and returns the boolean value that we store in the isEqual variable. 



   


   
 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>

We learned various ways to compare two HTML elements. Users can use pure JavaScript or jQuery’s is() method. Additionally, users can use different methods to access HTML elements and compare them.

The above is the detailed content of How to check if two elements are the same using jQuery/JavaScript?. For more information, please follow other related articles on the PHP Chinese website!

JavaScript jquery html 运算符 字符串 dom
Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：What are decorators and how are they used in JavaScript?Next article：What are decorators and how are they used in JavaScript?

Related articles

See more