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

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


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


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

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


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


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

布局:

排序产品名称所需积分已兑换产品详情管理操作
1积分兑换(诉讼可行性分析报告)缩略图3000580
  • 1.此服务产品为单次服务;
  • 2.需审核合同内容权限10页之内;
  • ...
查看全部
  • 1.此服务产品为单次服务;
  • 2.需审核合同内容权限10页之内;
  • 3.需审核合同内容权限10页之内;
  • 4.需审核合同内容权限10页之内;
  • 5.需审核合同内容权限10页之内;
$item['id']))}"class="alter">修改删除下架
1积分兑换(诉讼可行性分析报告)缩略图3000580
  • 1.此服务产品为单次服务;
  • 2.需审核合同内容权限10页之内;
  • ...
查看全部
  • 1.此服务产品为单次服务;
  • 2.需审核合同内容权限10页之内;
  • 3.需审核合同内容权限10页之内;
  • 4.需审核合同内容权限10页之内;
  • 5.需审核合同内容权限10页之内;
$item['id']))}"class="alter">修改删除下架

主要样式

.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");
})


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







本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部