jquery兄弟标签_jquery如何获取兄弟节点?
jquery如何获取兄弟节点?下面本篇文章就来给大家介绍一下使用jquery获取兄弟节点的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。
jquery获取兄弟节点的方法siblings():选取所有兄弟节点
next():选取后面的兄弟节点
nextAll():选取所有后面的兄弟节点
nextUntil():选取所有后面的兄弟节点,但不包括后面指定节点的弟弟。
prevAll():选取所有墙面的兄弟节点
prevUntil():选取所有的兄弟节点,但不包含后面指定的节点及指定节点的哥哥
示例
示例1:使用siblings()选择类名称为“star”的li元素的所有兄弟元素
.siblings *{
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
$(document).ready(function(){
$("li.start").siblings().css({"color":"red","border":"2px solid red"});
});
- ul (父节点)
- li (类名为"star"的上一个兄弟节点)
- li (类名为"star"的上一个兄弟节点)
- li (兄弟节点)
- li (类名为"star"的下一个兄弟节点)
- li (类名为"star"的下一个兄弟节点)
效果图:
示例2:使用next()返回带有类名 "start" 的每个
元素的后一个同级元素
.siblings *{
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
$(document).ready(function(){
$("li.start").next().css({"color":"red","border":"2px solid red"});
});
- ul (父节点)
- li (兄弟节点)
- li (兄弟节点)
- li (类名为"start"的兄弟节点)
- li (类名为"start"的li节点的下一个的兄弟节点)
- li (兄弟节点)
效果图:
示例3:使用nextAll()返回类名为“star”的li节点的所有下一个兄弟节点
.siblings *{
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
$(document).ready(function(){
$("li.start").nextAll().css({"color":"red","border":"2px solid red"});
});
- ul (父节点)
- li (兄弟节点)
- li (兄弟节点)
- li (类名为“star”的兄弟节点)
- li (类名为“star”的li节点的下一个兄弟节点)
- li (类名为“star”的li节点的下一个兄弟节点)
- li (类名为“star”的li节点的下一个兄弟节点)
效果图:
示例4:使用nextUntil()返回在类名为“star”和类名为“stop”的 li元素之间的所有下一个兄弟元素
.siblings *{
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
$(document).ready(function(){
$("li.start").nextUntil("li.stop").css({"color":"red","border":"2px solid red"});
});
- ul (父节点)
- li (兄弟节点)
- li (兄弟节点)
- li (类名为"start"的兄弟节点)
- li (类名为"start"的li节点的下一个兄弟节点)
- li (类名为"start"的li节点的下一个兄弟节点)
- li (类名为"start"的li节点的下一个兄弟节点)
- li (类名为"stop"的兄弟节点)
效果图:
示例5:使用prevAll()返回类名称为“star”的li元素之前的所有兄弟元素
.siblings *{
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
$(document).ready(function(){
$("li.start").prevAll().css({"color":"red","border":"2px solid red"});
});
- ul (parent)
- li (类名为"start"的li的上一个兄弟节点)
- li (类名为"start"的li的上一个兄弟节点)
- li (类名为"start"的li的上一个兄弟节点)
- li (类名为"start"的li节点)
- li (兄弟节点)
- li (兄弟节点)
效果图:
示例6:使用prevUntil()返回在类名为“star”和“stop”的li元素之间的所有上一个兄弟元素
.siblings *{
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
$(document).ready(function(){
$("li.start").prevUntil("li.stop").css({"color":"red","border":"2px solid red"});
});
- ul (父节点)
- li (类名为"stop"的兄弟节点)
- li (类名为"start"的li节点的上一个兄弟节点)
- li (类名为"start"的li节点的上一个兄弟节点)
- li (类名为"start"的li节点的上一个兄弟节点)
- li (类名为"start"的li节点)
- li (兄弟节点)
- li (兄弟节点)
效果图:
jquery兄弟标签_jquery如何获取兄弟节点?相关推荐
- jquery兄弟标签_jquery如何获取某一个兄弟节点,不是全部的,是指定的兄弟节点...
展开全部 $('#id').siblings() 当前元素62616964757a686964616fe59b9ee7ad9431333366303838所有的兄弟节点 $('#id').prev() ...
- jquery兄弟标签_jquery如何添加兄弟节点 不是子节点哦 O(∩_∩)O~
亚索 狮子狗 披甲龙龟. 5.
- jquery兄弟标签_jQuery获取父级、兄弟节点的方法
原标题:jQuery获取父级.兄弟节点的方法 一.jQuery的父节点查找方法 $(selector).parent(selector):获取父节点 $(selector).parentNode:以n ...
- jquery兄弟标签_JQuery的父、子、兄弟节点查找方法
jQuery.parent(expr) //找父元素 jQuery.parents(expr) //找到所有祖先元素,不限于父元素 jQuery.children ...
- jquery兄弟标签_jQuery的父,子,兄弟节点查找方法
jQuery的父,子,兄弟节点查找方法 jQuery.parent(expr) 找父亲节点,可以传入expr进行过滤,比如$("span").parent()或者$("s ...
- jquery兄弟标签_jquery查找子父、兄弟元素
jQuery.parent(expr) //找父元素 jQuery.parents(expr) //找到所有祖先元素,不限于父元素 jQuery.children ...
- jquery兄弟标签_jquery插入兄弟节点的操作方法
功能:插入指定元素到父元素的第一个位置(最左边) 实例 $self.prepend($selectLi); 解释 self是selectLi的父元素,把self放在selectLi的最前面(最左边), ...
- jquery兄弟标签_jquery 子元素及兄弟元素选择器
.children() 获得匹配元素集合中每个元素的子元素,选择器选择性筛选. list item 1 list item 2 ss list item 3 $(function(){ $('ul') ...
- js与jquery获取子节点、父节点、兄弟节点的方法
js与jquery获取子节点.父节点.兄弟节点的方法 在写代码时,时不时会遇到获取子节点.父节点等需要,但有的时候总是弄混淆不是很清晰,所以针对这些问题,总结了jquery与js获取节点的方法 js方 ...
最新文章
- 关于MySQLdb连接数据的使用(插入数据,删除数据,更新数据,搜索数据——前端页面完成这些对数据库的操作)
- Python 代码绘制航海王四皇大妈(BIG MOM) - 门卫大爷也能跟着学会的Turtle海龟绘图系列
- Android使用开源项目Xutils实现多线程下载文件
- jcDate时间选取jQuery插件
- 深度学习(十五)——SPPNet, Fast R-CNN
- java中三个基本框架_对于Java基础者应该如何理解Java中的三大框架!
- SpringMVC在使用Jackson2时关于日期类型格式化的问题
- jquery radio取值,checkbox取值,select取值,radio选中,
- F. 张胖胖玩多米诺骨牌 (南阳理工oj—21新生第二场招新赛)
- 记事本之修改非txt文档
- eclipse maven 报错Could not get the value for parameter encoding for plugin execution default
- 【Tcl学习笔记】第2章 Tcl语言的语法
- 软件架构风格-调用/返回风格
- android画板过程分析,Android涂鸦画板原理详解——从初级到高级(二)
- jmeter学习:如何使用jmeter自动发帖
- wp7编程环境配置(包含xp下安装)
- 【国仁网络资讯】视频号密集更新:唤醒的是谁的梦?
- Linux一条命令----同步网络时间
- 【2022年度书法鉴赏网课答案】
- 使用nodejs、express以及MySQL制作一个简单类淘宝的登录注册页面