03. JQuery 遍历元素

最新推荐文章于 2024-01-24 15:58:46 发布
最新推荐文章于 2024-01-24 15:58:46 发布
阅读量596 收藏
点赞数
分类专栏： JQuery 文章标签： jquery 遍历 文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Al_assad/article/details/76093563
版权

遍历祖先元素

Jquery 提供了以下的方法向上遍历DOM树：
parent() 返回被选元素的直接父元素， 只会向上一级对 DOM 树进行遍历；
parents() 返回被选元素的所有祖先元素， 它一路向上直到文档的根元素 (<html>)；
parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素；
以下示例
1 
<html>
2 
    <body>
3 
        <div>
4 
            <ul>
5 
                <li id="#li1">item1</li>
6 
                <li class="test">item2</li>
7 
                <li>item3</li>
8 
            </ul>
9 
            <p>Jsut for Test</p>
10 
        </div>
11 
    </body>
12 
</html>
1 
//获取<li>的父元素
2 
$("#li1").parent().css({"border":"2px solid red"});
3 
//获取<li>的所有父元素
4 
$("#li1").parents().css({"border":"2px solid red"});
5 
//获取<li>的到<div>为止的所有父元素
6 
$("#li1").parentUnitl("div").css({"border":"2px solid red"});

遍历同胞元素

Jquery 提供了以下的方法向遍历DOM树的同胞元素： 
siblings() 返回被选元素的 所有同胞元素。
next() 返回被选元素的 下一个同胞元素
nextAll() 返回被选元素的 后面的所有同胞元素
nextUntil() 返回 介于两个给定参数之间的所有跟随的同胞元素
prev() 返回 被选元素的上一个同胞元素
prevAll() 返回 被选元素的前面的所有同胞元素
prevUntil() 返回 介于两个给定参数之间的所有前面的同胞元素
这些方法的使用方式同遍历祖先元素的方法类似，同样都是返回一个或一组元素对象；

遍历后代元素

Jquery 提供了以下的方法向下遍历DOM树：
children() 返回被选元素的所下一层子元素
find() 返回被选元素的后代元素，一路向下直到最后一个后代
以下示例，使用上面的html文本作示例：
1 
//返回div的所有下一层元素
2 
$("div").children();      //返回<ul>,<p> 2个元素
3 
//返回div元素所有子元素
4 
$("div").find("*");      //返回<ul>,<p> 以及<ul>以下的所有<li>元素

遍历过滤器

Jquery 提供了以下的过滤器方法，可以用于在遍历元素时，添加过滤条件；
first()返回被选元素的首个元素
last()返回被选元素的最后一个元素
eq()返回被选元素中带有指定索引号的元素（索引号从0开始）
filter()过滤元素，不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回
not()同上，不过返回不匹配标准的所有元素
以下示例，使用上面的html文本作示例：
1 
//返回ul下第一个li元素
2 
$("ul").children().first();         //返回item1
3 
//返回ul下最后一个li元素
4 
$("ul").children().last();          //返回item3
5 
//返回ul下第2个li元素
6 
$("ul").children().eq(1);          //返回item2
7 
​
8 
//返回ul元素下所有class="test"的li元素
9 
$("ul").children().filter(".test");      //返回 item2
10 
//返回ul元素下所有class！="test"的li元素
11 
$("ul").children().not(".test");        //返回 item1，item3


Al_assad
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Jquery遍历元素
qq_43781887的博客
07-12 5036
在讲这个之前，建议先看一下jquery的隐式迭代，这个就不多说了，隐式迭代的缺点在于它只能集体进行操作不能只针对某个元素进行操作，可以看下面的代码： 如果想要依次对遍历的元素进行操作需要用each方法，语法是：$('div').each(function(index,domEle){})1.each()方法遍历匹配每一个元素。2.里面的回调函数有两个参数分别是index和domEle，index是每个元素的索引号，domEle是每个DOM元素对象，不是jquery对象，所以如果要用jquery的方法必须
jQuery遍历刚创建的元素
weixin_34413802的博客
01-08 186
对于刚创建的元素，使用jQuery的each方法，有时候会不起作用。解决方案大致有2种：   1、刚创建完的时候，就使用each方法  $('#btn').on("click", function(){ $('#div').append("&lt;input type='text' /&gt;"); $("input").each(function(){ //...
JQuery页面前端遍历样例
sty2008boy的专栏
12-01 129
 JQuery遍历1:CssClass遍历元素 将所有的checkbox设置为未选中，采用遍历的方法来完成 控件如下 &lt;button id="ClearPosition" type="button"&gt;清空职位&lt;/button&gt; &lt;input type="checkbox" class="jobPostaJoblist"/&gt;&
jquery使用、遍历元素
weixin_40014283的博客
12-09 393
首先使用注意： 别忘记写入口函数！$(document).ready(function(){ //代码 }); //或者简写如下 $(function(){ //代码 });parent() 方法$(document).ready(function(){ $("span").parent(); });parent() 方法返回被选元素的直接父元素。该方法只会向上一级对 DOM
Jquery之遍历元素
Harris-H的博客
10-23 417
JqueryJqueryJquery之遍历元素 使用each()each()each()方法传入函数两个参数分别为index,domindex,domindex,dom对象。 <body> <div>1</div> <div>2</div> <div>3</div> </body> <script src="jquery-3.5.1.js"></script> &l
JQuery $.each遍历JavaScript数组对象实例
10-25
在JavaScript和jQuery中，`$.each`函数是一个非常实用的工具，用于遍历数组或对象。这个函数允许我们对集合中的每个元素执行某些操作。在本例中，我们将深入探讨如何使用`$.each`处理JSON数据，特别是从JSON字符串...
jquery遍历select元素(实例讲解)
12-12
本篇文章提供一款jquery遍历select教程代码，主要是利用了$(“#<%=ddl_xreg_id.clientid%> option”).each(function() {形式来each遍历一次，这样所有的select就给查询了一次。 代码如下:[removed][removed]...
jQuery $.each遍历对象、数组用法实例
10-24
jQuery的$.each方法是用于遍历对象或数组的一个强大工具，它提供了灵活的方式来处理数据集合中的每个元素或属性。在JavaScript中，遍历通常是为了执行某种操作，如修改、检查或计算。$.each方法有两种主要的用法，一...
JQuery遍历元素的后代和同胞实现方法
10-21
在jQuery库中，有多种方法可以用来实现这种需求，接下来，我们将会详细解释如何使用children()和find()方法来遍历后代，以及如何使用siblings()方法来遍历同胞元素。 首先，让我们了解children()方法。children()...
jQuery中遍历元素，创建元素，添加元素，删除元素汇总
周百万的博客
08-17 3103
jQuery隐式迭代是对同一类元素做了同样的操作。如果相对同一元素做不同的操作，就需要用到遍历。
JQuery入门（四）JQuery遍历元素
jwang的博客
11-24 7995
前言       通过前面的了解，我们知道了基本的JQuery选择器，本章学习JQuery的元素遍历 方法 1.概念 我们了解了JQuery的选择器的相关知识，也清楚了层级选择器的概念，那么如果说我们要找很深层的元素对象怎么办呢？那么使用层级选择器当然可以，但是我们为了更加友好的表达，通常使用相关的方法进行获取。 本章讲解的实例代码如下： &lt;!DOCTYPE html&gt; ...
jq遍历元素
My52Hz
04-05 3358
jq遍历元素总结 通过jq遍历元素、并控制一些元素的属性（显示/隐藏、value、src等等），是我们在开发之中比较常见的操作，也为我们的业务功能扩宽了方向，接下来我将结合近段时间在工作上的际遇粗略介绍一下一些稍稍复杂的jq遍历。 案例一 需求背景： 通过获取被点击元素，并以此为基准，遍历该元素的其他元素，控制其他元素的一些属性。 功能需求： 通过获取被点击的元素a标签，给该元素设置背景颜色，并恢...
JQuery遍历后代元素
CodeTerminator的博客
03-12 874
JQuery遍历后代元素向下遍历dom树1.children()2.find()实例：&lt;script&gt; $(function(){ $(function(){ $(".btn1").click(function(){ $("div").children("p.p1").css({"color":"red","border":&quot
jQuery遍历元素
weixin_49884163的博客
08-22 258
each() 方法遍历元素 <script> var arr = ["red", "green", "blue"]; $("div").each(function(i, domEle) { console.log(i); console.log(domEle); $(domEle).css("color", arr[i]); sum += parseInt($(domEle).text()); }) console.
JQuery遍历
零怀念的博客
08-26 479
后代 1.find(选择器)：返回被选元素的所有后代元素集合 2.children（选择器)：返回被选元素的所有直接子元素集合（括号里可以为空） 示例： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&
jQuery 元素遍历
weixin_30689307的博客
07-09 408
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #div1, #div3 { width: 400px; height: 300px; ...
Jquery—常用遍历元素的api
Neokekeke的博客
01-22 669
简单记录下，还是要多看文档遍历过滤方法//eq()，first()，last()，has()，is()，filter()，map()，not()，slice() //eq()，匹配指定索引的那一个元素，参数是元素的下标 $('ul.g li').eq(2).css('background-color','orange');//first()，选择匹配元素集合中的第一个元素 $('ul.g li').
jQuery 遍历方法总结
忧郁的蛋的专栏
03-16 8115
5、each()，用于为每个匹配元素执行函数；在部分浏览器中不管用可以用prop，如果只是判断可以用$(this).find("ul>li>:checkbox:eq(" + i + ")").is(":checked");nextUntil()方法，主要用于获得指定元素的下一个同级元素，这个同级元素必须为指定元素与nextUntil()方法所设置元素之间的元素。prevUntil()方法，主要用于获得指定元素的上一个同级元素，这个同级元素必须为指定元素与prevUntil()方法所设置元素之间的元素。
jQuery遍历（树遍历）
最新发布
m0_59329828的博客
01-24 1048
获得匹配元素集合中每个元素的直接子元素，选择器选择性筛选。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值