Rumah > Artikel > hujung hadapan web > Bagaimana untuk menggunakan kaedah terdekat dalam jquery
Bagaimana untuk menggunakan kaedah terdekat dalam jquery
- WBOYasal
- 2022-05-09 11:35:063315semak imbas
Dalam jquery, kaedah terdekat digunakan untuk mengembalikan elemen nenek moyang pertama bagi elemen yang dipilih; objek jQuery kosong dengan sintaks "elemen object.closest(ekspresi pemilih yang sepadan dengan elemen)".
Persekitaran pengendalian tutorial ini: sistem windows10, versi jquery3.2.1, komputer Dell G3.
Cara menggunakan kaedah terdekat dalam jquery
kaedah closest() mengembalikan elemen nenek moyang pertama bagi elemen yang dipilih.
Nenek moyang ialah bapa, datuk, datuk, dan sebagainya.
Mulakan pada elemen semasa, melintasi pokok DOM dan kembalikan nenek moyang tunggal pertama yang sepadan dengan ungkapan yang diluluskan, mengembalikan objek jQuery yang mengandungi sifar atau satu elemen
fungsi terdekat( ) akan mula-mula semak sama ada elemen semasa sepadan, dan jika ia sepadan, ia akan mengembalikan elemen itu sendiri secara langsung. Jika tiada padanan, cari ke atas untuk elemen induk, lapisan demi lapisan, sehingga elemen yang sepadan dengan pemilih ditemui. Jika tiada apa yang ditemui, objek jQuery kosong dikembalikan.
Sintaksnya ialah:
Mengembalikan elemen nenek moyang pertama bagi elemen yang dipilih:
$(selector).closest(filter)
Mengembalikan elemen nenek moyang pertama dalam pepohon DOM yang ditemui menggunakan konteks DOM :
$(selector).closest(filter,context)
penapis Diperlukan. Menentukan ungkapan pemilih, elemen atau objek jQuery yang menyempitkan carian untuk elemen nenek moyang.
konteks Pilihan. Elemen DOM di mana elemen padanan boleh ditemui.
Contoh adalah seperti berikut:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>123</title>
<style>
.ancestors *{
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="js/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("span").closest("ul").css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body class="ancestors">body (曾曾祖先节点)
<div style="width:500px;">div (曾祖先节点)
<ul>ul (第二祖先 - 第二祖先节点)
<ul>ul (第一祖先 - 第一祖先节点)
<li>li (直接父节点)
<span>span</span>
</li>
</ul>
</ul>
</div>
</body>
<!-- 在这个例子中, $("span").closest("ul") 指我们查找一个span元素的第一个ul祖先。最靠近span的祖先是li,但是由于查到一个div，jQuery 跳过li元素继续查找下一个祖先，直到它找出我们要查找的ul.假如我们用parents() 方法替代，它将返回ul的祖先 。 -->
</html>Hasil keluaran:
Tutorial video berkaitan yang disyorkan: tutorial video jQuery
Atas ialah kandungan terperinci Bagaimana untuk menggunakan kaedah terdekat dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!