博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
《jQuery Cookbook中文版》——1.9 根据当前上下文遍历DOM获得新的DOM元素集
阅读量:5788 次
发布时间:2019-06-18

本文共 1235 字,大约阅读时间需要 4 分钟。

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

1.9 根据当前上下文遍历DOM获得新的DOM元素集

1.9.1 问题

你已经选择了一组DOM元素,根据选择集在DOM结构树中的位置,你打算遍历DOM获得一个新的元素集以供操作。

1.9.2 解决方案

jQuery提供一组方法,可以根据当前选择的DOM元素的上下文遍历DOM。

例如,查看如下的HTML片段:

screenshot

现在,用:eq()索引自定义选择器选择第2个screenshot元素:

//根据索引选择screenshot集合中的第2个元素,索引从0开始

jQuery('li:eq(1)');

现在有一个上下文——HTML结构中的一个出发点。出发点是第2个screenshot元素。从这里开始,可以到达任何位置——对,几乎任何位置。

让我们来看看,使用几个jQuery提供的DOM遍历方法能够到达哪里。代码中的注释就能说明问题:

jQuery('li:eq(1)').next() //选择第三个
  • jQuery('li:eq(1)').prev() //选择第一个
  • jQuery('li:eq(1)').parent() //选择
      jQuery('li:eq(1)').parent().children() //选择所有
    • jQuery('li:eq(1)').nextAll() //选择第二个
    • 之后的所有
    • jQuery('li:eq(1)').prevAll() //选择第二个
    • 之前的所有
  • 记住,这些遍历方法产生新的包装器集,使用end()可以返回前一个包装器集。

    1.9.3 讨论

    目前为止介绍的遍历方法展示了简单遍历。要了解遍历,还必须知道另外两个重要的概念。

    第一个概念可能显而易见——遍历方法可以链接。我们再来看看前面出现过的jQuery语句:

    jQuery('li:eq(1)').parent().children() //选择所有
  • 注意,我已经从第二个screenshot元素遍历到父元素,然后再从父元素选择的所有子元素。jQuery包装器集现在包含的是中的所有screenshot元素。当然,这只是为了说明遍历方法而设计的例子。如果我们想要的是一个只screenshot元素的包装器集,从一开始就选择所有screenshot元素要简单得多(例如,jQuery('li'))。

    处理遍历方法时需要牢记的第二个概念是许多方法都接受一个可选的参数,用于过滤选择集。我们仍然用链接的示例来说明这一点,看看如何修改代码,以便只选择最后一个

    元素。别忘了,这个例子仅仅用来说明遍历方法如何传递用于选择特定元素的表达式:
    jQuery('li:eq(1)').parent().children(':last') //选择最后一个 
  • jQuery还提供了其他遍历方法,在这里不作介绍。在本书里你将会看到这些遍历方法。

    转载地址:http://wrqyx.baihongyu.com/

    你可能感兴趣的文章
    这些Java面试题必须会-----鲁迅
    查看>>
    Linux 常用命令
    查看>>
    CSS盒模型
    查看>>
    ng2路由延时加载模块
    查看>>
    使用GitHub的十个最佳实践
    查看>>
    脱离“体验”和“安全”谈盈利的游戏运营 都是耍流氓
    查看>>
    慎用!BLEU评价NLP文本输出质量存在严重问题
    查看>>
    JAVA的优势就是劣势啊!
    查看>>
    ELK实战之logstash部署及基本语法
    查看>>
    帧中继环境下ospf的使用(点到点模式)
    查看>>
    BeanShell变量和方法的作用域
    查看>>
    LINUX下防恶意扫描软件PortSentry
    查看>>
    由数据库对sql的执行说JDBC的Statement和PreparedStatement
    查看>>
    springmvc+swagger2
    查看>>
    软件评测-信息安全-应用安全-资源控制-用户登录限制(上)
    查看>>
    我的友情链接
    查看>>
    Java Web Application 自架构 一 注解化配置
    查看>>
    如何 debug Proxy.pac文件
    查看>>
    Python 学习笔记 - 面向对象(特殊成员)
    查看>>
    Kubernetes 1.11 手动安装并启用ipvs
    查看>>