siblings获取不平级_siblings()是获取平级元素，哪不是平级应该怎么获取元素呢？...

最新推荐文章于 2021-10-03 10:46:18 发布
最新推荐文章于 2021-10-03 10:46:18 发布
阅读量323 收藏
点赞数
文章标签： siblings获取不平级
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_34246529/article/details/112806942
版权
该段代码实现了一个HTML页面的左侧导航菜单，包括展开/折叠子菜单及高亮选中当前项的功能。通过jQuery进行事件监听和DOM操作。在点击‘用户角色’时，‘产品检验项目设置’和‘追溯查询’没有清除样式，优化后的代码确保无论点击哪一层的li，都能清除其他所有‘menu_dropdown li’的样式。
摘要由CSDN通过智能技术生成

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<!-- <script type="text/javascript" src="//cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script> -->

<script type="text/javascript" src="jquery.min.js"></script>

</head>

<style>

*{

margin: 0;

padding:0;

}

a{

color:#000;

}

.asd-off{

background-color: yellow;

}

.asd-on{

background-color: lightgreen;

}

.chk-tap{

background-color: #e4393c;

}

.chk-j{

background-color: lightblue;

}

</style>

<body>

<div  class="aside-struct Hui-aside">

<ul class="menu_dropdown  bk_2">

<li ><a _href="showCodes.html" title="即时显码" href="javascript:void(0)">即时显码</a></li>

<li><a _href="TracesQuery.html" title="追溯查询" href="javascript:void(0)">追溯查询</a></li>

<li><a href="javascript:void(0)" _href="rawCode.html" title="生码管理">生码管理</a></li>

<li><a _href="autocode.html" title="自动扫码" href="javascript:void(0)">自动扫码</a></li>

<ol> <a _href="" title="仓库管理" href="javascript:void(0)" class="asd-off">仓库管理</a>

<ul style="display: none" class="asd-child">

<li class="chk-j"><a href="javascript:void(0)" _href="wmsMain.html" title="产品仓库">产品仓库</a></li>

<li><a href="javascript:void(0)" _href="wmsPassPut.html" title="出入库记录">出入库记录</a></li>

<li><a href="javascript:void(0)" _href="wmsFail.html" title="不合格产品">不合格产品</a></li>

</ul>

</ol>

<li><a _href="sysForTest.html" title="质检管理" href="javascript:void(0)" >质检管理</a></li>

<ol> <a _href="" title="经销商分销" href="javascript:void(0)" class="asd-off">经销商分销</a>

<ul  style="display: none" class="asd-child">

<li class="chk-j"><a href="javascript:void(0)" _href="retailStore.html" title="我的商品">我的商品</a></li>

<li><a href="javascript:void(0)" _href="salesRecord.html" title="分销记录">分销记录</a></li>

</ul>

</ol>

<ol> <a _href="" title="基础信息设置" href="javascript:void(0)" class="asd-off">基础信息设置</a>

<ul style="display: block" class="asd-child">

<li><a _href="unitSet.html" title="计量单位设置" href="javascript:void(0)" >计量单位设置</a></li>

<li><a _href="detectionPduSet.html" title="产品检验项目设置" href="javascript:void(0)" >产品检验项目设置</a></li>

<li><a _href="pduItem.html" title="产品信息" href="javascript:void(0)" >产品信息</a></li>

<li><a _href="company.html" title="企业信息" href="javascript:void(0)" >企业信息</a></li>

</ul>

</ol>

<ol> <a  title="权限管理" href="javascript:void(0)" class="asd-off">权限管理</a>

<ul style="display: block" class="asd-child" >

<li><a _href="roleMain-module.html" title="角色权限" href="javascript:void(0)" >角色权限</a></li>

<li><a _href="userRole-module.html" title="用户角色" href="javascript:void(0)" >用户角色</a></li>

<li><a _href="userMg-module.html" title="用户管理" href="javascript:void(0)" >用户管理</a></li>

<li><a _href="roleMg-module.html" title="角色管理" href="javascript:void(0)" >角色管理</a></li>

<li><a _href="auth-module.html" title="权限管理" href="javascript:void(0)" >权限管理</a></li>

</ul>

</ol>

<li><a _href="index12.html" title="关于我们" href="javascript:void(0)" >关于我们</a></li>

</ul>

</div>

</body>

<script>

/*左侧主导航*/

$('.asd-off').click(function(){

if($(this).siblings('ul').css('display')=='none'){

$(this).parent('li').siblings('li').removeClass('asd-on');

$(this).addClass('asd-on');

$(this).siblings('ul').slideDown(50).children('li');

if($(this).parents('li').siblings('li').children('ul').css('display')=='block'){

$(this).parents('li').siblings('li').children('ul')

.parent('li').children('a').removeClass('asd-on');

$(this).parents('li').siblings('li').children('ul').slideUp(50);

}

}else{

//控制自身变成+号

$(this).removeClass('asd-on');

//控制自身菜单下子菜单隐藏

$(this).siblings('ul').slideUp(50);

//控制自身子菜单变成+号

$(this).siblings('ul').children('li')

.children('ul').parent('li').children('a').addClass('asd-on');

//控制自身菜单下子菜单隐藏

$(this).siblings('ul').children('li').children('ul').slideUp(50);

//控制同级菜单只保持一个是展开的(-号显示)

$(this).siblings('ul').children('li').children('a').removeClass('asd-on');

}

});

$(".menu_dropdown li").on("click",function(){

$(this).addClass('chk-j').siblings().removeClass("chk-j");

})

</script>

</html>

$(".menu_dropdown li").on("click",function(){

$(this).addClass('chk-j').siblings().removeClass("chk-j");

})

**请问上面这段代码可以怎么改进？

这样做$(this).siblings()只能指向.menu_dropdown直接包裹的li而不能操作到.asd-child里的li将其样式删除**

比如说我点【用户角色】了【产品检验项目设置】和【追溯查询都没有清除样式】，需求就是不管是那一层的li点击了能够清除.menu_dropdown

li其他的样式。

$(".menu_dropdown>li").on("click",function(){

$(this).addClass('chk-j').siblings("li").removeClass("chk-j");

})

$(“.menu_dropdown>li”) 第一行加一个“>” 第二行siblings(“li”),

$(".menu_dropdown li").on("click", function () {

$(this).addClass('chk-j').siblings().find('li').removeClass("chk-j");

$(this).addClass('chk-j').closest('ol').siblings().removeClass('chk-j');

})

赛雷观影
关注
html 获取下一个兄弟节点,JS/JQuery获取当前元素的上一个/下一个兄弟级元素等元素的方法...
weixin_35079144的博客
06-07 2176
$(function(){//遍历获取的input元素对象数组，绑定click事件var len = $("input[type='file']").length;for(var i = ; i < len; i++){$("input[type='file']").eq(i).click(function(){$(this).next().val("");$(this).next().hi...
siblings获取不平级_jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法示例...
weixin_29501693的博客
01-13 162
本文实例讲述了jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法。，具体如下：siblings()属于jQuery筛选类的API，用来查找某个元素的所有同辈元素(所有兄弟姐妹)。假如需要实现如下功能：点击某个按钮的时候，该按钮背景色变成#88b828，其他按钮背景色变成#15b494。这个时候，siblings这个API很有用，也很简单。$(function(){$("#con...
jquery获取不同级别元素的方法
chenxg1251190170的博客
10-29 407
jquery获取不同级别元素的方法不同级别元素的方法 不同级别元素的方法 1、返回父级元素 (this).parent() 2、返回父级、祖父、曾祖父节等等节点元素 (this).parents() 3、返回所有孩子节点不返回子孙节点 (this).children() 5、返回当前位置前的元素 (this).prev() 6、返回当前位置前的所以元素 (this).prevAll() ...
html中siblings方法,jQuery中的siblings()是什么意思(推荐)
weixin_31507527的博客
06-28 424
定义和用法jQuery siblings() 方法返回被选元素的所有同胞元素，并且可以使用可选参数来过滤对同胞元素的搜索。实例演示：点击某个li标签后将其设置为红色，而其所有同胞元素去除红色样式。1.创建Html元素点击li元素设置红色并去除其余所有同胞元素的红色样式：栗子李子梨子荔枝2.设置css样式：div.box{width:300px;padding:20px;margin:20px;bo...
Jquery中siblings()方法
csdnlijishan的博客
05-30 1363
sibling()方法：遍历所有兄弟元素 1.一般情况不会包括自己 2.包括自己的特殊情况 例如：$(".txt").siblings(）获取的标签包括自己，因为同辈中有多个标签有class=‘txt’。 ...
siblings() 获得匹配集合中每个元素的同胞，通过选择器进行筛选是可选的。
weixin_30797027的博客
10-21 605
如果给定一个表示 DOM 元素集合的 jQuery 对象，.siblings() 方法允许我们在 DOM 树中搜索这些元素的同胞元素，并用匹配元素构造一个新的 jQuery 对象。 该方法接受可选的选择器表达式，与我们向 $() 函数中传递的参数类型相同。如果应用这个选择器，则将通过检测元素是否匹配该选择器对元素进行筛选。 请思考这个带有基本的嵌套列表的页面： <ul> ...
jquery siblings获取同辈元素用法实例分析
10-21
除了.siblings()外，还有诸如.children()、.parent()、.find()和.not()等方法，分别用于获取子元素、父元素、通过选择器找到所有匹配的后代元素以及排除某些元素等。学习这些方法将大大提高前端开发的效率和灵活性。...
jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法示例
10-20
主要介绍了jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法,结合简单实例形式分析了siblings()函数获取同辈元素的操作技巧,需要的朋友可以参考下
前端JS-21
画个圈圈诅咒你 的博客
10-03 465
Location
jQuery 遍历 - siblings() 方法
霖霂晗的专栏
03-18 1488
第一种方法 js代码： $(document).ready(function(){ $('.nav li.two').siblings(".nav li.one").css('background-color', '#B60000'); //除了数字1背景变为红色，其他的颜色不变 }) css 代码：
jq-获取父元素id
热门推荐
Hillbox
04-19 1万+
在js中写：var id=$(this).parent().parent().attr('id');或者：（这是遍历类为id的组件，并获取文本中已经填入的id）var id=$(this).parent().siblings('.id').text();
jquery之链式调用，层级菜单
weixin_30892987的博客
05-02 111
一. 链式调用的含义 jquery对象的方法会在执行完后返回这个jquery对象，所有jquery对象的方法可以连起来写： $('#div1') // id为div1的元素 .children('ul') //该元素下面的ul子元素 .slideDown('fast') //高度从零变到实际高度来显示ul元素 .parent() //跳到ul的父元素，也就是id为div1的元素 ...
jquery手风琴_有史以来最简单的jQuery手风琴
cunchi8090的博客
07-22 363
jquery手风琴Sometime ago someone asked in this Experts-Exchange question how to build an Accordion menu . Well, Accordion menus are really fascinating: they take up little space in our page even if they ...
jquery链式调用 - 层级菜单示例
DevOps海洋的渔夫@专栏
04-11 206
jquery对象的方法会在执行完后返回这个jquery对象，所有jquery对象的方法可以连起来写： $('#div1') // id为div1的元素 .children('ul') //该元素下面的ul子元素 .slideDown('fast') //高度从零变到实际高度来显示ul元素 .parent() //跳到ul的父元素，也就是id为div1的元素 .siblings()...
jquery中siblings()使用学习
钟渊博客
11-14 3327
定义和用法 siblings() 方法返回被选元素的所有同级元素。 同级元素是共享相同父元素的元素。 可以用如下图的功能： 我们点击某一个方式的时候，要让点击的元素选择并且要上前一个选中的元素为选择，这个就可以使用siblings()方法。 代码： A //默认A为选择状态 B Cjs代码：$(obj).addClass("active").siblings().rem
siblings()用法
Angelo的博客
12-15 7475
siblings()用于查找当前元素的同胞元素，主要作用就是除了自己外的其他同胞元素设置样式或者其他事件。 比如： 此处是将除了中间的li以外的四个设置背景颜色为红色
jq遍历子元素_十二.遍历节点
weixin_30193461的博客
01-04 689
1.遍历子节点 a.$(this).children() $(this).children() // 获取当前节点元素下的所有子节点 $(this).children("selector") // 获取当前元素下的selector节点 b.$(this).find() 跟 $(this).children() 的语法和效果基本一致2.遍历同辈元素 a.$(this).next() // 获取当...
$(this).addClass("on").siblings().removeClass("on").children('.tab_menu').html() 的解释
luckylbh的博客
03-22 7373
该元素增加一个类on同时它的兄弟元素去掉on类，并获取它的子元素.tab_menu里的html内容;siblings是选择父DOM下除了自身以外的DOM，把他们的on属性去掉，没有选择自己，自然也不会把自己的on属性去掉...
jquery 单击选中 再次选中取消选中
07-16 484
$(this).addClass('class')：为当前元素添加'class'类（供选择器使用 - - ） $(this).siblings('class')：查找当前元素的所有类名为 "class" 的所有同胞元素，也就是有相同类名的同胞元素。（同胞就是拥有相同的父元素） $(this).removeClass('class')：为当前元素去除'class'类，与addClass作用相...
event.target获取元素xpath
最新发布
05-10
`event.target` 是获取当前触发事件的元素节点，它并不直接提供获取元素的 XPath 的方法。但是，可以通过 `XPathResult` 对象的 `evaluate()` 方法来获取元素的 XPath。 以下是一个示例代码： ```javascript ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值