Rumah > Artikel > hujung hadapan web > Bagaimana untuk melaksanakan traversal elemen dalam jquery
Bagaimana untuk melaksanakan traversal elemen dalam jquery
- 青灯夜游asal
- 2022-05-30 15:00:454424semak imbas
Kaedah untuk melaksanakan traversal elemen: 1. children(), yang boleh mengembalikan semua elemen anak langsung bagi elemen yang dipilih 2. closest(), yang boleh mengembalikan elemen ancestor pertama bagi elemen yang dipilih; setiap (), laksanakan fungsi untuk setiap elemen yang sepadan 4. filter(), yang boleh menapis elemen yang ditentukan 5. nextAll(), dsb.
Persekitaran pengendalian tutorial ini: sistem Windows 7, versi jquery 1.10.2, komputer Dell G3.
jquery menyediakan pelbagai kaedah untuk merentasi elemen
| 方法 | 描述 |
|---|---|
| add() | 把元素添加到匹配元素的集合中 |
| addBack() | 把之前的元素集添加到当前集合中 |
| children() | 返回被选元素的所有直接子元素 |
| closest() | 返回被选元素的第一个祖先元素 |
| contents() | 返回被选元素的所有直接子元素（包含文本和注释节点） |
| each() | 为每个匹配元素执行函数 |
| end() | 结束当前链中最近的一次筛选操作，并把匹配元素集合返回到前一次的状态 |
| eq() | 返回带有被选元素的指定索引号的元素 |
| filter() | 把匹配元素集合缩减为匹配选择器或匹配函数返回值的新元素 |
| find() | 返回被选元素的后代元素 |
| first() | 返回被选元素的第一个元素 |
| has() | 返回拥有一个或多个元素在其内的所有元素 |
| is() | 根据选择器/元素/jQuery 对象检查匹配元素集合，如果存在至少一个匹配元素，则返回 true |
| last() | 返回被选元素的最后一个元素 |
| map() | 把当前匹配集合中的每个元素传递给函数，产生包含返回值的新 jQuery 对象 |
| next() | 返回被选元素的后一个同级元素 |
| nextAll() | 返回被选元素之后的所有同级元素 |
| nextUntil() | 返回介于两个给定参数之间的每个元素之后的所有同级元素 |
| not() | 从匹配元素集合中移除元素 |
| offsetParent() | 返回第一个定位的父元素 |
| parent() | 返回被选元素的直接父元素 |
| parents() | 返回被选元素的所有祖先元素 |
| parentsUntil() | 返回介于两个给定参数之间的所有祖先元素 |
| prev() | 返回被选元素的前一个同级元素 |
| prevAll() | 返回被选元素之前的所有同级元素 |
| prevUntil() | 返回介于两个给定参数之间的每个元素之前的所有同级元素 |
| siblings() | 返回被选元素的所有同级元素 |
| slice() | 把匹配元素集合缩减为指定范围的子集 |
Antaranya, terdapat dua kaedah untuk merentasi elemen kanak-kanak:
kaedah kanak-kanak(): Dapatkan elemen subset langsung di bawah elemen ini
kaedah find(): Dapatkan semua (termasuk subset subset) elemen subset di bawah elemen ini
Perbezaan:
The kaedah children() mengembalikan semua elemen anak langsung bagi elemen yang dipilih (elemen anak langsung, hanya cari anak lelaki dan bukan cucu (: maksudnya, ia tidak akan melintasi secara rekursif)
cari( ) kaedah untuk mendapatkan keturunan setiap elemen dalam koleksi elemen semasa (perhatikan bahawa untuk kaedah find(), parameter mesti diluluskan, jika tidak, ia akan menjadi tidak sah)
Contoh: Tanya semua elemen anak
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/jquery-1.10.2.min.js"></script>
<style>
div * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script>
$(document).ready(function() {
$("button").on("click", function() {
$("ul").find("*").css({
"color": "red",
"border": "2px solid red"
});
});
});
</script>
</head>
<body class="ancestors">
<div style="width:500px;">div (父节点)
<ul>ul (指定元素)
<li>li (子节点1)
<span>span (孙节点1)</span>
</li>
<li>li (子节点2)
<span>span (孙节点2)</span>
</li>
<li>li (子节点3)
<span>span (孙节点3)</span>
</li>
</ul>
</div>
<button>选取ul的所有子元素</button>
</body>
</html>
Terdapat 7 kaedah untuk merentasi unsur adik beradik:
kaedah adik beradik(), yang digunakan terutamanya untuk mendapatkan semua elemen adik-beradik unsur yang ditentukan
-
kaedah() seterusnya, terutamanya digunakan untuk mendapatkan unsur adik-beradik seterusnya bagi unsur yang ditentukan Kaedah
nextAll(), terutamanya digunakan Dapatkan semua elemen adik beradik seterusnya bagi elemen yang ditentukan - nextUntil() kaedah, terutamanya digunakan untuk mendapatkan elemen adik beradik seterusnya bagi yang ditentukan Elemen adik-beradik ini mestilah sama dengan elemen yang ditentukan Elemen antara elemen yang ditetapkan oleh kaedah nextUntil()
- kaedah sebelumnya() digunakan terutamanya untuk mendapatkan peringkat atas. elemen adik-beradik bagi elemen yang ditentukan
-
kaedah prevAll(), terutamanya digunakan untuk mendapatkan semua elemen adik-beradik pada tahap sebelumnya unsur yang ditentukan - kaedah prevUntil(), terutamanya digunakan untuk mendapatkan elemen adik beradik sebelumnya bagi Elemen elemen yang ditentukan, elemen adik beradik ini mestilah elemen antara elemen yang ditentukan dan elemen yang ditetapkan oleh kaedah prevUntil()
- kaedah adik beradik()
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
</head>
<body>
<div><span>Hello</span></div>
<p class="selected">Hello Again</p>
<p>And Again</p>
<script>
$("p").siblings(".selected").css("background", "yellow");
</script>
</body>
</html>kaedah() seterusnya
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script> </head> <body> <ul> <li>list item 1</li> <li>list item 2</li> <li class="third-item">list item 3</li> <li>list item 4</li> <li>list item 5</li> </ul> <script> $('li.third-item').next().css('background-color', 'red'); </script> </body> </html>
kaedahnextAll()
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script> </head> <body> <ul> <li>list item 1</li> <li>list item 2</li> <li class="third-item">list item 3</li> <li>list item 4</li> <li>list item 5</li> </ul> <script> $('li.third-item').nextAll().css('background-color', 'red'); </script> </body> </html>
nextUntil() kaedah
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<style>
.siblings * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script>
$(document).ready(function() {
$("li.start").nextUntil("li.stop").css({
"color": "red",
"border": "2px solid red"
});
});
</script>
</head>
<body>
<div style="width:500px;" class="siblings">
<ul>ul (父节点)
<li>li (兄弟节点)</li>
<li>li (兄弟节点)</li>
<li class="start">li (类名为"start"的兄弟节点)</li>
<li>li (类名为"start"的li节点的下一个兄弟节点)</li>
<li>li (类名为"start"的li节点的下一个兄弟节点)</li>
<li>li (类名为"start"的li节点的下一个兄弟节点)</li>
<li class="stop">li (类名为"stop"的兄弟节点)</li>
</ul>
</div>
<p>在这个例子中,我们返回在类名为“star”和类名为“stop”的 li元素之间的所有下一个兄弟元素。</p>
</body>
</html>sebelum() kaedah
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<style>
.siblings * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script>
$(document).ready(function() {
$("li.start").prev().css({
"color": "red",
"border": "2px solid red"
});
});
</script>
</head>
<body>
<div style="width:500px;" class="siblings">
<ul>ul (父节点)
<li>li (兄弟节点)</li>
<li>li (类名为"start"的li节点的上一个兄弟节点)</li>
<li class="start">li (类名为"start"的li节点)</li>
<li>li (兄弟节点)</li>
<li>li (兄弟节点)</li>
</ul>
</div>
</body>
</html>kaedah prevAll()
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<style>
.siblings * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script>
$(document).ready(function() {
$("li.start").prevAll().css({
"color": "red",
"border": "2px solid red"
});
});
</script>
</head>
<body>
<div style="width:500px;" class="siblings">
<ul>ul (parent)
<li>li (类名为"start"的li的上一个兄弟节点)</li>
<li>li (类名为"start"的li的上一个兄弟节点)</li>
<li>li (类名为"start"的li的上一个兄弟节点)</li>
<li class="start">li (类名为"start"的li节点)</li>
<li>li (兄弟节点)</li>
<li>li (兄弟节点)</li>
</ul>
</div>
<p>在这个例子中,我们返回类名称为“star”的li元素之前的所有兄弟元素。</p>
</body>
</html>kaedah sebelum()
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<style>
.siblings * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script>
$(document).ready(function() {
$("li.start").prevUntil("li.stop").css({
"color": "red",
"border": "2px solid red"
});
});
</script>
</head>
<body>
<div style="width:500px;" class="siblings">
<ul>ul (父节点)
<li class="stop">li (类名为"stop"的兄弟节点)</li>
<li>li (类名为"start"的li节点的上一个兄弟节点)</li>
<li>li (类名为"start"的li节点的上一个兄弟节点)</li>
<li>li (类名为"start"的li节点的上一个兄弟节点)</li>
<li class="start">li (类名为"start"的li节点)</li>
<li>li (兄弟节点)</li>
<li>li (兄弟节点)</li>
</ul>
</div>
<p>在这个例子中,我们返回在类名为“star”和“stop”的li元素之间的所有上一个兄弟元素,。</p>
</body>
</html>[Pembelajaran yang disyorkan: 
video bahagian hadapan web】
Atas ialah kandungan terperinci Bagaimana untuk melaksanakan traversal elemen dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Artikel berkaitan
Lihat lagi- Bagaimana untuk mengosongkan elemen yang tidak dipilih pada tahap yang sama dalam jquery
- Bagaimana untuk menetapkan kedudukan elemen dalam jquery
- Bagaimana untuk memadam baris lain kecuali pengepala jadual dengan jquery
- Bagaimana untuk melaksanakan menu lungsur dengan jquery
- Bagaimana untuk menetapkan baris pertama supaya tidak dikosongkan dalam jquery