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

相关文章

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》:本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例,但是返回n

SpringMVC获取请求参数的方法

《SpringMVC获取请求参数的方法》:本文主要介绍SpringMVC获取请求参数的方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下... 目录1、通过ServletAPI获取2、通过控制器方法的形参获取请求参数3、@RequestParam4、@

MySQL中动态生成SQL语句去掉所有字段的空格的操作方法

《MySQL中动态生成SQL语句去掉所有字段的空格的操作方法》在数据库管理过程中,我们常常会遇到需要对表中字段进行清洗和整理的情况,本文将详细介绍如何在MySQL中动态生成SQL语句来去掉所有字段的空... 目录在mysql中动态生成SQL语句去掉所有字段的空格准备工作原理分析动态生成SQL语句在MySQL

如何高效移除C++关联容器中的元素

《如何高效移除C++关联容器中的元素》关联容器和顺序容器有着很大不同,关联容器中的元素是按照关键字来保存和访问的,而顺序容器中的元素是按它们在容器中的位置来顺序保存和访问的,本文介绍了如何高效移除C+... 目录一、简介二、移除给定位置的元素三、移除与特定键值等价的元素四、移除满足特android定条件的元

Python获取C++中返回的char*字段的两种思路

《Python获取C++中返回的char*字段的两种思路》有时候需要获取C++函数中返回来的不定长的char*字符串,本文小编为大家找到了两种解决问题的思路,感兴趣的小伙伴可以跟随小编一起学习一下... 有时候需要获取C++函数中返回来的不定长的char*字符串,目前我找到两种解决问题的思路,具体实现如下:

golang获取当前时间、时间戳和时间字符串及它们之间的相互转换方法

《golang获取当前时间、时间戳和时间字符串及它们之间的相互转换方法》:本文主要介绍golang获取当前时间、时间戳和时间字符串及它们之间的相互转换,本文通过实例代码给大家介绍的非常详细,感兴趣... 目录1、获取当前时间2、获取当前时间戳3、获取当前时间的字符串格式4、它们之间的相互转化上篇文章给大家介

Python获取中国节假日数据记录入JSON文件

《Python获取中国节假日数据记录入JSON文件》项目系统内置的日历应用为了提升用户体验,特别设置了在调休日期显示“休”的UI图标功能,那么问题是这些调休数据从哪里来呢?我尝试一种更为智能的方法:P... 目录节假日数据获取存入jsON文件节假日数据读取封装完整代码项目系统内置的日历应用为了提升用户体验,

微信公众号脚本-获取热搜自动新建草稿并发布文章

《微信公众号脚本-获取热搜自动新建草稿并发布文章》本来想写一个自动化发布微信公众号的小绿书的脚本,但是微信公众号官网没有小绿书的接口,那就写一个获取热搜微信普通文章的脚本吧,:本文主要介绍微信公众... 目录介绍思路前期准备环境要求获取接口token获取热搜获取热搜数据下载热搜图片给图片加上标题文字上传图片

使用Python实现获取网页指定内容

《使用Python实现获取网页指定内容》在当今互联网时代,网页数据抓取是一项非常重要的技能,本文将带你从零开始学习如何使用Python获取网页中的指定内容,希望对大家有所帮助... 目录引言1. 网页抓取的基本概念2. python中的网页抓取库3. 安装必要的库4. 发送HTTP请求并获取网页内容5. 解

mysql如何查看当前连接数

《mysql如何查看当前连接数》:本文主要介绍mysql如何查看当前连接数问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录mysql查看当前连接数查看mysql数据库允许最大连接数总结mysql查看当前连接数查看当前连接数SHOW STATUS LIKE