使用closest替换parent
尽量不要使用parent去获取DOM元素,如下代码:
var $activeRows = $this.parent().parent().children(".active");
这样的代码扩展性不好,一旦DOM结构发生改变,这里的逻辑分分钟会挂,如某天你可能会套了个div用来清除浮动,但是没想到导致有个按钮点不了了就坑爹了。
应该用closest,如:
var $activeRows = $this.closest(".order-list").find(".active");
直接定位和目标元素的最近共同祖先节点,然后find一下目标元素就好了,这样就不会出现上面的问题,只要容器的类没有变。如果你需要处理非自己的相邻元素,可以这么搞:
$this.closest("li").siblings("li.active").removeClass("active");
$this.addClass("active");
使用closest替换parent的更多相关文章
- jq中的事件委托:closest,parent,parents,delegate
closest .closest(selector) 从当前元素开始沿 DOM 树向上,获得匹配第一个符合选择器的祖先元素,返回零个或一个元素的 jQuery 对象. .parents() 和 .cl ...
- 锋利的jQuery第2版学习笔记1~3章
第1章,认识jQuery 注意:使用的jQuery版本为1.7.1 目前流行的JavaScript库 Prototype(http://www.prototypejs.org),成型早,面向对象的思想 ...
- jquery 节点操作大全
$para.attr("title"); 实例: <script type="text/javascript"> //<![CDATA[ $( ...
- jQuery学习之旅 Item4 细说DOM操作
jQuery-–DOM操作(文档处理) Dom是Document Object Model的缩写,意思是文档对象模型.DOM是一种与浏览器.平台.语言无关的接口,使用该接口可以轻松访问页面中所有的标准 ...
- HTML/CSS/JS编码规范
最近整理了一份HTML/CSS/JS编码规范,供大家参考.目录:一.HTML编码规范二.CSS编码规范三.JS编码规范 一.HTML编码规范 1. img标签要写alt属性 根据W3C标准,img标签 ...
- 前端之JavaScript基础
前端之JavaScript基础 本节内容 JS概述 JS基础语法 JS循环控制 ECMA对象 BOM对象 DOM对象 1. JS概述 1.1. javascript历史 1992年Nombas开发出C ...
- BOM和DOM
Day 01 正课: 1.什么是DOM: 2.DOM Tree 3.遍历DOM树: 1.什么是DOM: 原生js=ECMAScript(核心语法)+ DOM(专门操作网页内容的API)+ 3天 BOM ...
- 39、重新复习js之三
1.盒子模型典型标签 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:// ...
- Jquery遍历选中的input标签
$("input[name='chkAgent']:[checked]").each(function () { alert($(this).attr("value&qu ...
随机推荐
- codeforces 979A Pizza, Pizza, Pizza!!!
题意: 对一个圆形的pizza,只能用直线来切它,求把它切为n+1份的形状和size都相同的最下次数. 思路: 形状和size都相同,那么只能是扇形,分奇偶讨论. n为0还得特判,切0刀,因为这个还被 ...
- 查看完整的 Unicode 字符集
https://unicode-table.com/cn/ 这个链接是我想要查的 格式如下图 先放这里收藏,我也不知道怎么搜索
- Saiku + Kylin 多维分析平台探索
背景 为了应对各种数据需求,通常,我们的做法是这样的: 对于临时性的数据需求:写HQL到Hive里去查一遍,然后将结果转为excel发送给需求人员. 对于周期性的.长期性的数据需求:编写脚本,结合Hi ...
- USB接口案例——多态和转型
其中,为传递和使用的匿名对象,即创建了对象,但是没有引用类和对象名来接收: 电脑类中的操作usb的成员方法中,要向下转型,毛主席讲的具体问题具体分析,不同的设备有不同的操作:
- 转:判断Caps Lock键是否打开,如果打开则关闭
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
- AELF(ELF)区块链项目介绍
AELF(ELF)区块链项目介绍,Aelf在交易所上的名称是ELF,最近涨了不少了,可以长期关注逢低建仓,根据自身情况可以适当轻仓配置点.AELF总结下来就是希望打造一个B2B的区块链开放式OS系统. ...
- AURO OtoSys IM100 vs Lonsdor K518ISE: which better?
Comparison: AURO OtoSys IM100 and Lonsdor K518ISE It’s aimed to help make a purchase of decent auto ...
- linux下的route命令
语法: route [-CFvnee] route [add|del] [-net|-host] [网络或主机] netmask [gw|dev] route [-V] [--version] [ ...
- react复习总结(2)--react生命周期和组件通信
这是react项目复习总结第二讲, 第一讲:https://www.cnblogs.com/wuhairui/p/10367620.html 首先我们来学习下react的生命周期(钩子)函数. 什么是 ...
- kswapd0 进程CPU占用过高
前几天遇到的一个问题,自己本地用VM配置的虚拟机,一般会top查看进程以及CPU占用的一些情况.又一次用laravel 打印对象,里面的内容比较多,浏览器当时就卡了. 然后看进程的情况.我以为会是ng ...