siblings获取非当前元素的所有同等级元素

2023-10-10 01:20

本文主要是介绍siblings获取非当前元素的所有同等级元素,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

我们都知道,在写js代码的时候,获取各种对象是一个比较让人头疼 的事情,获取某一个指定的元素还比较好说,只要有标示,或者知道他的标签和位置,那都是非常简单的事情,但是,我们的需求往往并没有那么单一,我想获取一个元素的,除了他之外的所有元素该怎么半呢?相信很多经常手写js代码的人或多或少都会遇到类似的问题。那么,接下来,我就给大家介绍一个比较好用的方法:siblings。


w3c上的介绍就不多说了,链接在下,可以自行查看:
http://www.w3school.com.cn/jquery/traversing_siblings.asp


下边,我们就来介绍一下使用的情况(现在以表格为例,其他的以此类推)。

当我点击表格内某一元素的时候,我希望为当前行以外的所有行内,相同元素添加事件。见下图为例,


当我点击一个“产看全部”的时候,自己的显示与隐藏已经实现,但是当我点击多个对象,都会会有多个都是显示状态,如下所示:


很显然,我们并不希望这样的结果,在自己的显示与隐藏正常的情况下,我们希望其他所有的都隐藏掉。解决方法如下:

布局:

<table class="content"><thead class="thead"><tr><td style="width:68px;"><input type="checkbox"/><span>排序</span></td><td style="width:232px;"><span>产品名称</span></td><td style="width:83px;"><span>所需积分</span></td><td style="width:83px;"><span>已兑换</span></td><td style="width:350px;"><span>产品详情</span></td><td style="width:180px;"><span>管理操作</span></td></tr></thead><tbody class="tbody"><tr style="height: 70px"><td><input type="checkbox"/><span>1</span></td><td><span>积分兑换(诉讼可行性分析报告)</span><a class="slt" href="#">缩略图<img class="img_slt" style="display: none" src="{$Think.const.ADMIN_IMG_CUL}uploadimg.png" alt=""/></a></td><td><span>3000</span></td><td><span>580</span></td><td><span><ul class="list"><li>1.此服务产品为单次服务;</li><li>2.需审核合同内容权限10页之内;</li><li>...</li></ul><span class="ckqb">查看全部<ul class="ul_show"><li>1.此服务产品为单次服务;</li><li>2.需审核合同内容权限10页之内;</li><li>3.需审核合同内容权限10页之内;</li><li>4.需审核合同内容权限10页之内;</li><li>5.需审核合同内容权限10页之内;</li></ul></span></span></td><td><a href="{:U('Admin/Article/saveArticleCate/',array('article_cate_id' => $item['id']))}"class="alter">修改</a><a href="javascript:void(0)" class="del">删除</a><a href="javascript:void(0)" class="sold">下架</a></td></tr><tr style="height: 70px"><td><input type="checkbox"/><span>1</span></td><td><span>积分兑换(诉讼可行性分析报告)</span><a class="slt" href="#">缩略图<img class="img_slt" style="display: none" src="{$Think.const.ADMIN_IMG_CUL}uploadimg.png" alt=""/></a></td><td><span>3000</span></td><td><span>580</span></td><td><span><ul class="list"><li>1.此服务产品为单次服务;</li><li>2.需审核合同内容权限10页之内;</li><li>...</li></ul><span class="ckqb">查看全部<ul class="ul_show"><li>1.此服务产品为单次服务;</li><li>2.需审核合同内容权限10页之内;</li><li>3.需审核合同内容权限10页之内;</li><li>4.需审核合同内容权限10页之内;</li><li>5.需审核合同内容权限10页之内;</li></ul></span></span></td><td><a href="{:U('Admin/Article/saveArticleCate/',array('article_cate_id' => $item['id']))}"class="alter">修改</a><a href="javascript:void(0)" class="del">删除</a><a href="javascript:void(0)" class="sold">下架</a></td></tr></tbody>
</table>

主要样式

.integral_store .content>tbody>tr>td .ckqb>.ul_show{display: none;
}
.integral_store .content>tbody>tr>td .show>.ul_show{display: block;position: absolute;left: -225px;top: 150%;border: 1px solid #DCDCDC;width: 265px;background-color: #fff;padding: 10px 0 10px 18px;box-shadow: 0 0 5px #ddd;border-radius: 3px;z-index: 1000;background-color: #fff;
}
.integral_store .content>tbody>tr>td .show>.ul_show>li{color: #999;z-index: 1000;text-align: left;
}

js实现:

$(".ckqb").click(function(){$(this).toggleClass("show");console.log($(this));$(this).parents("tr").siblings("tr").find(".ckqb").removeClass("show");
})


这样我们就将为题给解决了,需要的朋友试一下吧,如有为题,欢迎指正






这篇关于siblings获取非当前元素的所有同等级元素的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/176907

相关文章

Python获取浏览器Cookies的四种方式小结

《Python获取浏览器Cookies的四种方式小结》在进行Web应用程序测试和开发时,获取浏览器Cookies是一项重要任务,本文我们介绍四种用Python获取浏览器Cookies的方式,具有一定的... 目录什么是 Cookie?1.使用Selenium库获取浏览器Cookies2.使用浏览器开发者工具

Java获取当前时间String类型和Date类型方式

《Java获取当前时间String类型和Date类型方式》:本文主要介绍Java获取当前时间String类型和Date类型方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,... 目录Java获取当前时间String和Date类型String类型和Date类型输出结果总结Java获取

C#监听txt文档获取新数据方式

《C#监听txt文档获取新数据方式》文章介绍通过监听txt文件获取最新数据,并实现开机自启动、禁用窗口关闭按钮、阻止Ctrl+C中断及防止程序退出等功能,代码整合于主函数中,供参考学习... 目录前言一、监听txt文档增加数据二、其他功能1. 设置开机自启动2. 禁止控制台窗口关闭按钮3. 阻止Ctrl +

一文详解如何使用Java获取PDF页面信息

《一文详解如何使用Java获取PDF页面信息》了解PDF页面属性是我们在处理文档、内容提取、打印设置或页面重组等任务时不可或缺的一环,下面我们就来看看如何使用Java语言获取这些信息吧... 目录引言一、安装和引入PDF处理库引入依赖二、获取 PDF 页数三、获取页面尺寸(宽高)四、获取页面旋转角度五、判断

Python使用OpenCV实现获取视频时长的小工具

《Python使用OpenCV实现获取视频时长的小工具》在处理视频数据时,获取视频的时长是一项常见且基础的需求,本文将详细介绍如何使用Python和OpenCV获取视频时长,并对每一行代码进行深入解析... 目录一、代码实现二、代码解析1. 导入 OpenCV 库2. 定义获取视频时长的函数3. 打开视频文

C# 比较两个list 之间元素差异的常用方法

《C#比较两个list之间元素差异的常用方法》:本文主要介绍C#比较两个list之间元素差异,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录1. 使用Except方法2. 使用Except的逆操作3. 使用LINQ的Join,GroupJoin

MySQL 获取字符串长度及注意事项

《MySQL获取字符串长度及注意事项》本文通过实例代码给大家介绍MySQL获取字符串长度及注意事项,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录mysql 获取字符串长度详解 核心长度函数对比⚠️ 六大关键注意事项1. 字符编码决定字节长度2

python3如何找到字典的下标index、获取list中指定元素的位置索引

《python3如何找到字典的下标index、获取list中指定元素的位置索引》:本文主要介绍python3如何找到字典的下标index、获取list中指定元素的位置索引问题,具有很好的参考价值,... 目录enumerate()找到字典的下标 index获取list中指定元素的位置索引总结enumerat

SpringMVC高效获取JavaBean对象指南

《SpringMVC高效获取JavaBean对象指南》SpringMVC通过数据绑定自动将请求参数映射到JavaBean,支持表单、URL及JSON数据,需用@ModelAttribute、@Requ... 目录Spring MVC 获取 JavaBean 对象指南核心机制:数据绑定实现步骤1. 定义 Ja

Python打印对象所有属性和值的方法小结

《Python打印对象所有属性和值的方法小结》在Python开发过程中,调试代码时经常需要查看对象的当前状态,也就是对象的所有属性和对应的值,然而,Python并没有像PHP的print_r那样直接提... 目录python中打印对象所有属性和值的方法实现步骤1. 使用vars()和pprint()2. 使