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

相关文章

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. 使

CSS实现元素撑满剩余空间的五种方法

《CSS实现元素撑满剩余空间的五种方法》在日常开发中,我们经常需要让某个元素占据容器的剩余空间,本文将介绍5种不同的方法来实现这个需求,并分析各种方法的优缺点,感兴趣的朋友一起看看吧... css实现元素撑满剩余空间的5种方法 在日常开发中,我们经常需要让某个元素占据容器的剩余空间。这是一个常见的布局需求

C++中RAII资源获取即初始化

《C++中RAII资源获取即初始化》RAII通过构造/析构自动管理资源生命周期,确保安全释放,本文就来介绍一下C++中的RAII技术及其应用,具有一定的参考价值,感兴趣的可以了解一下... 目录一、核心原理与机制二、标准库中的RAII实现三、自定义RAII类设计原则四、常见应用场景1. 内存管理2. 文件操

Python pip下载包及所有依赖到指定文件夹的步骤说明

《Pythonpip下载包及所有依赖到指定文件夹的步骤说明》为了方便开发和部署,我们常常需要将Python项目所依赖的第三方包导出到本地文件夹中,:本文主要介绍Pythonpip下载包及所有依... 目录步骤说明命令格式示例参数说明离线安装方法注意事项总结要使用pip下载包及其所有依赖到指定文件夹,请按照以

SpringBoot服务获取Pod当前IP的两种方案

《SpringBoot服务获取Pod当前IP的两种方案》在Kubernetes集群中,SpringBoot服务获取Pod当前IP的方案主要有两种,通过环境变量注入或通过Java代码动态获取网络接口IP... 目录方案一:通过 Kubernetes Downward API 注入环境变量原理步骤方案二:通过

使用Python实现获取屏幕像素颜色值

《使用Python实现获取屏幕像素颜色值》这篇文章主要为大家详细介绍了如何使用Python实现获取屏幕像素颜色值,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 一、一个小工具,按住F10键,颜色值会跟着显示。完整代码import tkinter as tkimport pyau

python获取cmd环境变量值的实现代码

《python获取cmd环境变量值的实现代码》:本文主要介绍在Python中获取命令行(cmd)环境变量的值,可以使用标准库中的os模块,需要的朋友可以参考下... 前言全局说明在执行py过程中,总要使用到系统环境变量一、说明1.1 环境:Windows 11 家庭版 24H2 26100.4061