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版本信息获取方法详解与实战

《Python版本信息获取方法详解与实战》在Python开发中,获取Python版本号是调试、兼容性检查和版本控制的重要基础操作,本文详细介绍了如何使用sys和platform模块获取Python的主... 目录1. python版本号获取基础2. 使用sys模块获取版本信息2.1 sys模块概述2.1.1

Java发送SNMP至交换机获取交换机状态实现方式

《Java发送SNMP至交换机获取交换机状态实现方式》文章介绍使用SNMP4J库(2.7.0)通过RCF1213-MIB协议获取交换机单/多路状态,需开启SNMP支持,重点对比SNMPv1、v2c、v... 目录交换机协议SNMP库获取交换机单路状态获取交换机多路状态总结交换机协议这里使用的交换机协议为常

MyBatis/MyBatis-Plus同事务循环调用存储过程获取主键重复问题分析及解决

《MyBatis/MyBatis-Plus同事务循环调用存储过程获取主键重复问题分析及解决》MyBatis默认开启一级缓存,同一事务中循环调用查询方法时会重复使用缓存数据,导致获取的序列主键值均为1,... 目录问题原因解决办法如果是存储过程总结问题myBATis有如下代码获取序列作为主键IdMappe

C#使用iText获取PDF的trailer数据的代码示例

《C#使用iText获取PDF的trailer数据的代码示例》开发程序debug的时候,看到了PDF有个trailer数据,挺有意思,于是考虑用代码把它读出来,那么就用到我们常用的iText框架了,所... 目录引言iText 核心概念C# 代码示例步骤 1: 确保已安装 iText步骤 2: C# 代码程

Spring Boot中获取IOC容器的多种方式

《SpringBoot中获取IOC容器的多种方式》本文主要介绍了SpringBoot中获取IOC容器的多种方式,包括直接注入、实现ApplicationContextAware接口、通过Spring... 目录1. 直接注入ApplicationContext2. 实现ApplicationContextA

Python一次性将指定版本所有包上传PyPI镜像解决方案

《Python一次性将指定版本所有包上传PyPI镜像解决方案》本文主要介绍了一个安全、完整、可离线部署的解决方案,用于一次性准备指定Python版本的所有包,然后导出到内网环境,感兴趣的小伙伴可以跟随... 目录为什么需要这个方案完整解决方案1. 项目目录结构2. 创建智能下载脚本3. 创建包清单生成脚本4

python获取指定名字的程序的文件路径的两种方法

《python获取指定名字的程序的文件路径的两种方法》本文主要介绍了python获取指定名字的程序的文件路径的两种方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要... 最近在做项目,需要用到给定一个程序名字就可以自动获取到这个程序在Windows系统下的绝对路径,以下

JavaScript中比较两个数组是否有相同元素(交集)的三种常用方法

《JavaScript中比较两个数组是否有相同元素(交集)的三种常用方法》:本文主要介绍JavaScript中比较两个数组是否有相同元素(交集)的三种常用方法,每种方法结合实例代码给大家介绍的非常... 目录引言:为什么"相等"判断如此重要?方法1:使用some()+includes()(适合小数组)方法2

SpringBoot 获取请求参数的常用注解及用法

《SpringBoot获取请求参数的常用注解及用法》SpringBoot通过@RequestParam、@PathVariable等注解支持从HTTP请求中获取参数,涵盖查询、路径、请求体、头、C... 目录SpringBoot 提供了多种注解来方便地从 HTTP 请求中获取参数以下是主要的注解及其用法:1

把Python列表中的元素移动到开头的三种方法

《把Python列表中的元素移动到开头的三种方法》在Python编程中,我们经常需要对列表(list)进行操作,有时,我们希望将列表中的某个元素移动到最前面,使其成为第一项,本文给大家介绍了把Pyth... 目录一、查找删除插入法1. 找到元素的索引2. 移除元素3. 插入到列表开头二、使用列表切片(Lis