siblings()遍历同胞元素

最新推荐文章于 2023-05-10 23:40:26 发布
最新推荐文章于 2023-05-10 23:40:26 发布
阅读量1.1k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_26222859/article/details/51488739
版权

siblings() 方法返回被选元素的所有同胞元素。被选元素不包含在同胞元素中

siblings()方法详情看：http://www.w3school.com.cn/jquery/traversing_siblings.asp

更多遍历同胞元素看：http://www.w3school.com.cn/jquery/jquery_traversing_siblings.asp


sibling()的实际运用

   用在ul的所有li标签只有唯一一个能具有某个css样式。

 被点击的li元素添加css样式，而其它的li元素必须铲除该css样式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="js/jquery-1.12.3.js">
</script>
<script type="text/javascript">
$(function(){
<span style="white-space:pre">	</span>$(".p_one").click(function(){
<span style="white-space:pre">	</span> $(this).addClass("red").siblings().removeClass("red");
<span style="white-space:pre">	</span>});
<span style="white-space:pre">	</span>});
</script>


<style type="text/css">
.p_one {font-size: 20px;}
.p_two {font-size: 16px;}
.red{color:red;}
</style>
</head>
<body>
<ol>
<li class="p_one">click me</li>
<li class="p_one">click me</li>
<li class="p_one">click me</li>

</ol>
</body>
</html>

实现效果如下：


当然，同胞元素是指同一个父元素下的不包括被选元素的所有元素

所以

<ol>
<li class="p_one">click me</li>
<li class="p_one">click me</li>
<li class="p_one">click me</li>
<p class="p_one">click me</p>
</ol>

p也是被选li元素的同胞元素


zhifeng687
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
在Oracle层次查询中给SIBLINGS排序
03-03
Oracle SELECT语句中的START WITH和CONNECT BY子句自动阻断一个层次。缺少这项特性，就需要一个复杂的自联接来确定行之间的逻辑联系。START WITH子句指定被认为是层次起点，或“根”的一行或几行，然后CONNECT BY PRIOR子句指明哪些行彼此关联。本文将为大家介绍如何在Oracle层次查询中给SIBLINGS排序。
siblings() 获得匹配集合中每个元素的同胞，通过选择器进行筛选是可选的。
weixin_30797027的博客
10-21 584
如果给定一个表示 DOM 元素集合的 jQuery 对象，.siblings() 方法允许我们在 DOM 树中搜索这些元素的同胞元素，并用匹配元素构造一个新的 jQuery 对象。 该方法接受可选的选择器表达式，与我们向 $() 函数中传递的参数类型相同。如果应用这个选择器，则将通过检测元素是否匹配该选择器对元素进行筛选。 请思考这个带有基本的嵌套列表的页面： <ul> ...
oracle order siblings by,sql中ORDER SIBLINGS BY排序的含义
weixin_33344147的博客
04-16 751
SIBLINGS 是兄弟姐妹的意思，那么ORDER SIBLINGS BY的意思就是在兄弟姐妹之间的排序，和order by所表示的含义绝对不同，针对树状sql，我觉得ORDER SIBLINGS BY更有意义，树状sql查询出来的结果本身就是按照层次(hierarchy)结构排好序的，而加上关键字SIBLINGS 其实是在hierarchy内部进行排序。You have to be carefu...
oracle siblings
dada360778512的专栏
04-27 2402
如何在racle层次查询中给SIBLINGS排序  　　Oracle SELECT语句中的START WITH和CONNECT BY子句自动阻断一个层次。缺少这项特性，就需要一个复杂的自联接来确定行之间的逻辑联系。START WITH子句指定被认为是层次起点，或“根”的一行或几行。然后CONNECT BY PRIOR子句指明哪些行彼此关联。  　　例如，
oracle s合并查询,在Oracle层次查询中给SIBLINGS排序
weixin_42549496的博客
04-06 258
Oracle SELECT语句中的START WITH和CONNECT BY子句自动阻断一个层次。缺少这项特性，就需要一个复杂的自联接来确定行之间的逻辑联系。START WITH子句指定被认为是层次起点，或“根”的一行或几行。然后CONNECT BY PRIOR子句指明哪些行彼此关联。[@more@]例如，列表A中的查询从Oracle HR样本模式的EMPLOYEES表中生成一个“Reports ...
jQuery 遍历 – 同胞(siblings)
01-19
jQuery 遍历 – 同胞(siblings) 同胞拥有相同的父元素。 通过 jQuery，您能够在 DOM 树中遍历元素的同胞元素。 在 DOM 树中水平遍历 有许多有用的方法让我们在 DOM 树进行水平遍历： siblings() next() ...
jquery siblings获取同辈元素用法实例分析
10-21
主要介绍了jquery siblings获取同辈元素用法,结合实例形式分析了jQuery使用siblings遍历同级元素的相关技巧,需要的朋友可以参考下
jquery遍历函数siblings()用法实例
10-23
主要介绍了jquery遍历函数siblings()用法,结合实例形式较为详细的分析了jquery的siblings函数用于元素遍历的相关技巧,需要的朋友可以参考下
jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法示例
10-20
主要介绍了jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法,结合简单实例形式分析了siblings()函数获取同辈元素的操作技巧,需要的朋友可以参考下
Oracle SIBLINGS
qq529965211的专栏
05-29 609
排序时如何不用 siblings 关键字提供的特性进行相同的排序输出 ? 曾经有个需求就是在低版本Oracle中要实现这个功能. 当时有个客观的条件就是层次 level 最多为 3 层 我写了个比较复杂的, 希望能看到更简单的写法. select cast(lpad(empno,level*4)||ename as varchar2(25)) empnoname,hiredate,m
oracle ORDER SIBLINGS BY
fengeh的专栏
05-04 3595
oracle ORDER SIBLINGS BY
Oracle中的树形查询及伪列
m0_71406734的博客
05-10 3129
Oracle中的树形查询及伪列
jQuery 基础案例
weixin_52088589的博客
04-29 154
1 , 多场景登录 <script src="./jquery/jquery-3.5.1.min.js"></script> <script> $('.multi-type a').on('click', function () { //添加上类名,然后找到所有兄弟元素让兄弟元素删除类名 $(this).addClass('active').siblings().removeClass('active') //让盒子显示
$(this).addClass("on").siblings().removeClass("on").children('.tab_menu').html() 的解释
luckylbh的博客
03-22 7322
该元素增加一个类on同时它的兄弟元素去掉on类，并获取它的子元素.tab_menu里的html内容;siblings是选择父DOM下除了自身以外的DOM，把他们的on属性去掉，没有选择自己，自然也不会把自己的on属性去掉...
jQuery 遍历 - 同胞(siblings)
10-25 1万+
让我们在 DOM 树进行水平遍历： siblings() next() nextAll() nextUntil() prev() prevAll() prevUntil() jQuery siblings() 方法 siblings() 方法返回被选元素的所有同胞元素。 下面的例子返回 &lt;h2&gt; 的所有同胞元素： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&
$(this).addClass(‘class‘).siblings(‘class‘).removeClass(‘class‘)的作用
木落
05-10 1916
$(this).addClass(‘class’)：为当前元素添加’class’类（供选择器使用 - - ） $(this).siblings(‘class’)：查找当前元素的所有类名为 “class” 的所有同胞元素，也就是有相同类名的同胞元素。（同胞就是拥有相同的父元素） $(this).removeClass(‘class’)：为当前元素去除’class’类，与addClass作用相反 $(this).addClass(‘class’).siblings(‘class’).removeClass(‘c
vue中类似于jq中的ele.addClass('class').siblings().removeClass('class')效果
weixin_30795127的博客
04-09 762
vue中要实现当前元素添加类同级兄弟元素移除类的效果，可使用v-bind:class； v-bind:class支持变量，当变量发生变化的时候，class将发生变化； 实现方法举例： <template> 　　<div> 　　　　<ul> 　　　　　　<li v-for="(item,index) in liList" :key="index"...
jq-获取父元素id
热门推荐
Hillbox
04-19 1万+
在js中写：var id=$(this).parent().parent().attr('id');或者：（这是遍历类为id的组件，并获取文本中已经填入的id）var id=$(this).parent().siblings('.id').text();
jquery中siblings()使用学习
钟渊博客
11-14 3309
定义和用法 siblings() 方法返回被选元素的所有同级元素。 同级元素是共享相同父元素的元素。 可以用如下图的功能： 我们点击某一个方式的时候，要让点击的元素选择并且要上前一个选中的元素为选择，这个就可以使用siblings()方法。 代码： A //默认A为选择状态 B Cjs代码：$(obj).addClass("active").siblings().rem
jQuery 遍历用法
最新发布
06-07
jQuery提供了多种遍历DOM元素的方法，以下是一些常用的方法： 1. find()方法：查找当前元素下所有匹配选择器的子元素。 2. children()方法：查找当前元素下所有直接子元素。 3. parent()方法：查找当前元素的直接...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值