《jQuery Cookbook中文版》——1.7 返回破坏性修改之前的选择

    xiaoxiao2024-04-18  9

    本节书摘来自异步社区《jQuery Cookbook中文版》一书中的第1章,第1.7节,作者:【美】jQuery社区专家组 译者:姚军 , 孙博更多章节内容可以访问云栖社区“异步社区”公众号查看。

    1.7 返回破坏性修改之前的选择

    1.7.1 问题需要删除用于一组元素的破坏性jQuery方法(例如,filter()或find()),以便将集合恢复到破坏性方法使用之前的状态,就像破坏性方法从来没有调用过一样。

    1.7.2 解决方案jQuery提供end()方法,可以用它返回使用破坏性方法之前选择的一组DOM元素。为了理解end()方法,我们来看看下面的HTML。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head> <body> <p>text</p> <p class="middle">Middle <span>text</span></p> <p>text</p> <script type="text/JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/JavaScript">    alert(jQuery('p').filter('.middle').length); //alerts 1    alert(jQuery('p').filter('.middle').end().length); //alerts 3    alert(jQuery('p').filter('.middle').find('span') .end().end().length); //alerts 3 </script> </body> </html>

    代码中的第一条alert()语句包含的jQuery语句搜索文档中所有元素,然后对选中的元素应用filter()方法,仅选择类为middle的元素。length属性报告了集合中剩下元素的数量:

    alert(jQuery('p').filter('.middle').length); //提示1

    下一条alert()语句使用了end()方法。这里所做的操作和前一条语句相同,唯一例外的是撤消了filter()方法,返回filter()方法使用前包装器集包含的元素:

    alert(jQuery('p').filter('.middle').end().length); //提示3

    最后一条alert()语句示范了如何两次使用end()方法移除filter()和find()破坏性修改,使包装器集返回其原始构成的方法:

    alert(jQuery('p').filter('.middle').find('span').end().end().length); //提示3

    1.7.3 讨论如果使用end()方法之前没有执行破坏性操作,将会返回一个空集。破坏性操作指的是任何改变匹配jQuery元素集合的操作,也就是返回jQuery对象的任何遍历或者操纵方法,包括add()、andSelf()、children()、closes()、filter()、find()、map()、next()、nextAll()、not()、parent()、parents()、prev()、prevAll()、siblings()、slice()、clone()、appendTo()、prependTo()、insertBefore()、insertAfter()和replaceAll()。

    相关资源:敏捷开发V1.0.pptx
    最新回复(0)