使用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");
时间: 2024-10-07 23:42:06

使用closest替换parent的相关文章

HTML/CSS/JS编码规范

最近整理了一份HTML/CSS/JS编码规范,供大家参考.目录:一.HTML编码规范二.CSS编码规范三.JS编码规范 一.HTML编码规范 1. img标签要写alt属性 根据W3C标准,img标签要写alt属性,如果没有就写一个空的.但是一般要写一个有内容的,根据图片想要表达的意思,因为alt是在图片无法加载时显示的文字.如下不太好的写法: <img src="company-logo.svg" alt="ABC Company Logo"> 更好的

锋利的jQuery第2版学习笔记1~3章

第1章,认识jQuery 目前流行的JavaScript库 Prototype(http://www.prototypejs.org),成型早,面向对象的思想把握不到位,导致结构松散 Dojo(http://dojotoolkit.org),学习曲线陡,文档不全,最严重的是API不稳定 YUI(http://developer.yahoo.com/yui/) Ext JS(http://www.extjs.com),侧重界面,比较臃肿,用于商业用途需要付费 MooTools(http://moo

zepto源码

/** * * ┏┓ ┏┓ * ┏┛┻━━━┛┻┓ * ┃ ┃ * ┃ ━ ┃ * ┃ ┳┛ ┗┳ ┃ * ┃ ┃ * ┃ ┻ ┃ * ┃ ┃ * ┗━┓ ┏━┛Code is far away from bug with the animal protecting * ┃ ┃ 神兽保佑,代码无bug * ┃ ┃ * ┃ ┗━━━┓ * ┃ ┣┓ * ┃ ┏┛ * ┗┓┓┏━┳┓┏┛ * ┃┫┫ ┃┫┫ * ┗┻┛ ┗┻┛ * */ /* Zepto 1.1.4 - zepto event aj

Git手册

GitUserManualChinese - Robin Wiki GitUserManualChinese Git 用户手册(1.5.3 及后续版本适用) 翻译: 罗峥嵘 (Robin Steven) < [email protected] > 英文版本: http://www.kernel.org/pub/software/scm/git/docs/user-manual.html Contents Preface 前言 Chapter 1. Repositories and Branch

dorado

///校验名称长度 end/////////--------------------------------------------------------------------------------------- var type = arg.data.get("TYPE");var change =  arg.data.get("CHANGE_STATE");if(type != 3){ if(change == "A"){//绿色  a

JavaScripts学习日记——DOM

DOM Document Object Model 文档对象模型  整合js和html css.控制html文档行为.DOM就是把页面当中所有内容全部封装成对象.HTML文档中万物皆对象. 1.对象的分类    Document ***    Element  ***    Attribute    Text    Common以上5类对象 具有一些共同特征 抽象出了一个父类    Node        自身属性            nodeName            nodeValue

39、重新复习js之三

1.盒子模型典型标签 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"

移动端的silder,未封装,基于zepto的touch模块,有参照修改过touch的bug

<!--html模块--> <header class="appoin-head"> <ul> <li class="aa"> <a href="#"> <img src="img/banner1.png" alt=""> </a> </li> <li> <a href="#"

关于jquery方面的知识点

jquery向上查找父元素 用到的方法:closest() parents() parent() closest() 方法获得匹配选择器的第一个祖先元素 [*]parent()函数是只往父级找一层:[*]parents()函数是往父级找多层,一直找到body标签. 向下查找子元素 用到的方法:find() children() 通过children获取的是该元素的下级元素,而通过find获取的是该元素的下级所有元素. 获得元素相对于选择器的 index 位置. 该元素可以通过 DOM 元素或 j