jQuery 遍历 - 同胞

最新推荐文章于 2021-07-04 12:25:14 发布
最新推荐文章于 2021-07-04 12:25:14 发布
阅读量310 收藏
点赞数 1
分类专栏： jquery 文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zjhwqx/article/details/52623005
版权
<!DOCTYPE html>
<html>
<head>
<style>
.descendants *
{ 
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$("#div1").children().css({"color":"red","border":"3px solid red"});
$("#div2").find("span").css({"color":"red","border":"2px solid red"});
    $("#div3").find("*").css({"color":"red","border":"2px solid red"});
    $("#h2-1").siblings().css({"color":"red","border":"2px solid red"});
$("#h2-2").siblings("p").css({"color":"red","border":"2px solid red"});
$("#h2-3").nextAll().css({"color":"red","border":"2px solid red"});
$("#h2-4").nextUntil("h6").css({"color":"red","border":"2px solid red"});

});   
</script>
</head>
<body>
<div id="div1" class="descendants" style="width:500px">div1 （当前元素）
<ul>ul子
    <span>span1孙</span>
</ul>
<p>p子
    <span>span2孙</span>
</p>
</div>
<div id="div2" class="descendants" style="width:500px">div2 （当前元素）
<ul>ul子
    <span>span1孙</span>
</ul>
<p>p子
    <span>span2孙</span>
</p>
</div>
<div id="div3" class="descendants" style="width:500px">div3 （当前元素）
<ul>ul子
    <span>span1孙</span>
</ul>
<p>p子
    <span>span2孙</span>
</p>
</div>
<div id="div4" class="descendants" style="width:500px">我是div4 操作同胞元素
<ul>
<span>我是span</span>
<h2 id="h2-1">我是H2</h2>
<p>我是p标签
</p>
<li>我是li标签
</li>
</ul>
</div>
<div id="div5" class="descendants" style="width:500px">我是div5 操作同胞p元素
<ul>
<span>我是span</span>
<h2 id="h2-2">我是H2</h2>
<p>我是p标签
</p>
<li>我是li标签
</li>
</ul>
</div>
<div id="div6" class="descendants" style="width:500px">我是div6 操作h2之后的元素
<ul>
<span>我是span</span>
<h2 id="h2-3">我是H2</h2>
<p>我是p标签
</p>
<li>我是li标签
</li>
</ul>
</div>
<div id="div7" class="descendants" style="width:500px">我是div6 操作h2之后的元素
<ul>
<span>我是span</span>
<h2 id="h2-4">我是H2</h2>
<p>我是p标签
</p>
<li>我是li标签
</li>
<h3>h3</h3>
<h6>h6</h6>
<h5>h5</h5>
</ul>
</div>
</body>
</html>
jony0303
关注
专栏目录
Jquery中获取内容和属性、删除元素、添加元素、jQuery遍历----------(遍历、祖先、后代、同胞、过滤)、jQuery - AJAX 简介
qq_44791674的博客
10-05 527
Jquery中获取内容和属性 Jquery拥有可操作HTML元素和属性的强大方法。 常用的方法有： text()/设置或返沪所选元素的文本内容 html()/设置或返回所选元素的内容（相比text（）方法，支持返回btml标记） val()/返回表单字段的值（理解为value的简写） attr()/设置或返回所选属性的值 text()/设置或返沪所选元素的文本内容&html()/设置或返回所选元素的内容（相比text（）方法，支持返回btml标记） <!DOMTYPE> <ht
HTML与JS学习
weixin_66498478的博客
11-29 759
html与js学习
js对象数组遍历
小图的专栏
11-27 3530
前言：最近由于项目需求，新增了一个行程搜索结果页，搜索的关键字需要高亮。且从搜索结果页进入原来的行程详情页，原来详情页中的关键字也同样需要做高亮处理。由于详情页是之前做好的，页面渲染用的是underscore模板。一个页面中大大小小的模板有很多，为了避免麻烦和便于管理。我决定不对原有的模板结构进行修改，直接将从服务端的数据进行过滤一遍，然后对需要高亮的关键字进行数据替换。随意会增加页面初始渲染时间
H5 ---- 点击遍历所有标签，复制对应的文本
weixin_30622181的博客
01-31 277
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0, mi...
js遍历list数据显示到h5页面_大数据应用 | 带你找个地方去避暑
weixin_30759991的博客
12-08 967
炎热的夏季，想找个地方去避暑。查来查去也就那几个比较热门的地方，不仅消费高，人还多。找个凉快的区域游玩是不是很舒服？何不自己做一个热力图查看查看情况。说做咱就做，大致思路是这样的：爬取大陆各城市当天温度绘制热力图完美OK，信息来源就定为中国天气网(http://www.weather.com.cn/)，用简单的方法爬取下来就行了。老方法，先导入包，requests 和 Beautiful...
jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍
10-27
综上所述，nextUntil()和prevUntil()方法是jQuery遍历功能中非常有用的工具，它们让开发者可以灵活地选择元素集之间的同胞元素，便于进行特定的DOM操作和样式修改。在使用这两个方法时，需要确保选择器的正确性以及...
jQuery 遍历 – 同胞(siblings)
01-19
jQuery 遍历 – 同胞(siblings) 同胞拥有相同的父元素。 通过 jQuery，您能够在 DOM 树中遍历元素的同胞元素。 在 DOM 树中水平遍历 有许多有用的方法让我们在 DOM 树进行水平遍历： siblings() next() ...
jQuery--遍历操作实例小结【后代、同胞及过滤】
10-15
2. **遍历同胞** - `siblings()` 方法用于获取元素的所有同胞元素，即同级的兄弟姐妹元素。例如，`$("h2").siblings();` 返回所有与 `<h2>` 具有相同父元素的元素。 - `next()` 返回紧跟在指定元素后面的同胞元素...
jquery中对同胞元素的处理方法
weixin_39297798的博客
07-16 757
在前端开发过程中，总会遇到对同一级别元素的样式进行替换。这时用 同胞元素的处理方法会很简单 例如: 红 白 黄 黑 对选择的li标签添加 on 类属性值  ：可通过  siblings()方法   进行以下处理         $.fn.events.tap(".plug_attr_preset",function(){             $(this).ad
HTML5 dataset遍历,如何使用H5的dataset
weixin_29863809的博客
07-04 595
这次给大家带来如何使用H5的dataset，使用H5的dataset的注意事项有哪些，下面就是实战案例，一起来看一下。HTML5标准允许你在普通的元素标签里，嵌入类似data-*的属性，来实现一些简单数据的存取。它的数量不受限制，并且也能由javascript动态修改，也支持CSS选择器进行样式设置。这使得data属性特别灵活，也非常强大。有了这样的属性我们能够更加有序直观的进行数据预设或存储。当...
对数据遍历的三种方式之foreach 、for与Iterator
董盛姣
12-01 6716
对数据的遍历方式有三种：for循环遍历、增强for循环遍历、Iterator迭代器遍历。 增强for循环 增强for循环是JDK1.5版本后出来的一个高级for循环，是用来专门遍历数组和集合的。内部原理其实是一个迭代器遍历也就是我们常说的foreach遍历         格式：    for（元素的数据类型  变量  ： Collection集合or数组）
H5——while循环，for循环
weixin_30270561的博客
04-05 944
【循环结构的步骤】 * ① 声明循环变量 * ② 判断循环条件 * ③ 执行循环体(while的{}中的所有代码) * ④ 更改循环变量 * 然后执行② ③ ④ var n=1; // ① 声明循环变量 while(n<=10){ // ② 判断循环条件 document.write("百年孤独"+"<br />"); // ③ 执行循环体(while的{}...
h5循环结构，嵌套
huxia4815的博客
11-17 1868
3 循环结构 While（满足的条件）{ 当满足条件时执行的内容 } 例：输出100-1000之内的所有的水仙数 var num=100; while(num1000) { var a=Math.floor(num/100); var b=Math.floor(num/10)%10; var c=num%10;    var res="";     if (num==a*
HTML5精通：树遍历
代码教主
06-10 427
树遍历是DOM中最重要的概念之一。 自将计算机科学确立为自己的研究领域以来，数十年来的研究已用于数据结构和算法。 最常用的结构之一是一棵树。 到处都是树木。 一个非常基本但有用且经常使用的版本是二叉树。 锦标赛可以表示为二叉树。 但是，DOM树不是二进制的。 相反，它是一棵Kary树。 每个节点可能有零到N个子节点，称为childNodes 。 DOM树承载大量可能的节点类型。 其中可能有...
h5遍历数据
yukun的博客
05-21 3353
function porpertyList(list) { var card = ""; $.each(list, function (index, item) { var cardNo = item.cardNo; cardNo = cardNo.substring(cardNo.length - 4); card += '‘等待’
使用jquery 遍历函数-find()、eq()
最新发布
05-18
find()和eq()是jQuery中常用的遍历函数。 find(selector)函数可以在当前元素的子孙元素中查找符合指定选择器的元素，并将它们作为一个新的jQuery对象返回。例如： ```javascript // 查找id为parent的元素下所有...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

jony0303

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值