Bagaimana untuk menyemak sama ada dua elemen adalah sama menggunakan jQuery/JavaScript?-tutorial js-php.cn

Bagaimana untuk menyemak sama ada dua elemen adalah sama menggunakan jQuery/JavaScript?

WBOY

Lepaskan： 2023-08-27 16:13:02

ke hadapan

1120 orang telah melayarinya

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

Kami boleh mengakses elemen HTML menggunakan pelbagai kaedah dalam JavaScript vanilla atau jQuery (perpustakaan khusus JavaScript).

Kadangkala, selepas mengakses elemen DOM, pembangun mungkin perlu menyemak sama ada kedua-dua elemen yang diakses adalah sama. Dalam tutorial ini, kita akan belajar menggunakan pengendali kesamaan ketat JavaScript dan kaedah jQuery untuk menyemak kesamaan dua elemen HTML.

Menggunakan operator kesamarataan (==) dalam JavaScript

Kami boleh mengakses elemen HTML melalui getElemenetById, querySelector, getElementByClassName dan kaedah lain. Selepas itu, kita boleh menyimpan ini dalam pembolehubah JavaScript dan pembolehubah ini boleh dibandingkan menggunakan operator kesamaan untuk menyemak kesamaan dua elemen, sama seperti kita menggunakannya untuk membandingkan dua nombor atau nilai rentetan.

Tatabahasa

Pengguna boleh mengikuti sintaks berikut untuk membandingkan dua elemen HTML.

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

Salin selepas log masuk

Dalam sintaks di atas, elemen1 dan elemen2 ialah elemen HTML yang diakses daripada DOM menggunakan JavaScript.

Contoh

Dalam contoh ini, kami mencipta

elemen HTML dan menambah atribut id dengan nilai "ujian". Selepas itu, kami mengakses elemen

dengan id menggunakan kaedah document.getElementById(). pembolehubah elemen1 dan elemen2 mengandungi elemen yang sama.

Selepas itu kami membandingkannya menggunakan operator kesamarataan dan pengguna boleh memerhatikan 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>

Salin selepas log masuk

Contoh

Dalam contoh ini, kami mencipta elemen menggunakan tag

. Seterusnya, kami mengakses elemen HTML mengikut nama teg menggunakan kaedah document.getElementByTagName(). Ia mengembalikan tatasusunan semua elemen HTML dengan tag

Selepas itu, kami membandingkan nilai pada indeks 0^th dan 1^st tatasusunan elemen, dan pengguna boleh melihat dalam output bahawa kedua-duanya berbeza.

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

Salin selepas log masuk

Gunakan kaedah is() jQuery

jQuery mengandungi pelbagai kaedah untuk memanipulasi elemen DOM. Kaedah is() mengambil satu elemen sebagai parameter dan satu lagi elemen sebagai rujukan, dan membandingkan dua elemen tersebut.

Selain itu, pengguna perlu menggunakan notasi "$" untuk mengakses elemen dalam jQuery sebelum menggunakan kaedah is().

Tatabahasa

Pengguna boleh menggunakan kaedah is() mengikut sintaks berikut untuk menyemak sama ada dua elemen HTML adalah sama.

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

Salin selepas log masuk

Dalam sintaks di atas, kami mengakses elemen "btn1" dan "btn2" mengikut id.

Contoh

Dalam contoh ini, kami menambah jQuery CDN untuk menggunakan jQuery dalam kod HTML. Kami juga mencipta dua butang dengan ID yang berbeza.

Dalam JavaScript, kami menggunakan kaedah is(), menghantar elemen dengan id "btn2" sebagai parameter dan mengambil elemen dengan id "btn1" sebagai rujukan. Kaedah is() membandingkan dua elemen dan mengembalikan nilai boolean yang kami simpan dalam pembolehubah isEqual.



   



    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>

Salin selepas log masuk

Kami mempelajari pelbagai cara untuk membandingkan dua elemen HTML. Pengguna boleh menggunakan JavaScript tulen atau kaedah is() jQuery. Selain itu, pengguna boleh menggunakan kaedah yang berbeza untuk mengakses elemen HTML dan membandingkannya.

Atas ialah kandungan terperinci Bagaimana untuk menyemak sama ada dua elemen adalah sama menggunakan jQuery/JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!