DOM遍历方法

时间:2023-02-06 14:31:12

为标题行添加样式

$(document).ready(function(){

$('th').parent().addClass('table-heading');

$('tr:not([th]):odd').addClass('odd');

$('tr:not([th]):even').addClass('even');

});

取得某一行的其他所有单元格

1.取得包含Henry的单元格,然后取得该单元格的所有同辈元素

$('tr:contains("henry")').siblings().addClass('height');

2.取得包含Henry的单元格,再取得他的父元素,然后找到该元素中包含的所有编号大于0的单元格(:gt 选择器选取 index 值高于指定数的元素)

$('td:contains("henry")').parent().find('td:gt(0)').addClass('height');

3.取得包含Henry的单元格,再取得他的父元素,找到该元素中包含的所有单元格,然后过滤这些单元格排除包含Henry的那一个

$('td:contains("henry")').parents().find('td').not(':contains("henry")').addClass("height");

4.取得包含Henry的单元格,再取得他的父元素,找到该元素包含的子元素中的第2个单元格,添加类,取消最后一次.find(),再查找该元素包含的子元素中的第3个单元格,添加类

$('td:contains("henry")').parent().find('td:eq(1)').addClass('height').end().find('td:eq(2)').addClass('height');

表格源码:

<table>
        <tr>
            <th>Title</th>
            <th>Category</th>
        </tr>
        <tr>
            <td>As you like it</td>
            <td>comedy</td>
        </tr>
        <tr>
            <td>All's well that ends well</td>
            <td>comedy</td>
        </tr>
        <tr>
            <td>hamlet</td>
            <td>tragedy</td>
        </tr>
        <tr>
            <td>mschrth</td>
            <td>tragedy</td>
        </tr>
        <tr>
            <td>romeo and juliet</td>
            <td>tragey</td>
        </tr>
        <tr>
            <td>herry part</td>
            <td>history</td>
        </tr>
        <tr>
            <td>henry</td>
            <td>history</td>
            <td>hkh</td>
            <td>lmy</td>
        </tr>
    </table>

DOM遍历方法的更多相关文章

  1. jQuery基础(DOM篇,append&lpar;&rpar;,after&lpar;&rpar;,prepend&lpar;&rpar;,insertAfter&lpar;&rpar;,节点删除,遍历方法each&lpar;&rpar;)

    1.DOM创建节点及节点属性   创建流程比较简单,大体如下:   - 创建节点(常见的:元素.属性和文本) - 添加节点的一些属性 - 加入到文档中   流程中涉及的一点方法:   - 创建元素:d ...

  2. 玩转DOM遍历——用NodeIterator实现getElementById,getElementsByTagName方法

    先声明一下DOM2中NodeIterator和TreeWalker这两类型真的只是用来玩玩的,因为性能不行遍历起来超级慢,在JS中基本用不到它们,除了<高程>上有两三页对它的讲解外,谷歌的 ...

  3. Jquery中each的三种遍历方法

    Jquery中each的三种遍历方法 $.post("urladdr", { "data" : "data" }, function(dat ...

  4. JavaScript、jQuery、fish的遍历方法&lpar;each、forEach&rpar;总结

    起因 在工作中,需要在遍历的dom中找到第一个并做下操作然后退出遍历,我首先想到了用each方法,但由于无论是公用的jQuery组件还是公司的fish组件.我都忘记了怎么去退出遍历,所以就有了这篇帖子 ...

  5. JQuery总结:选择器归纳、DOM遍历和事件处理、DOM完全操作和动画 (转)

    JQuery总结:选择器归纳.DOM遍历和事件处理.DOM完全操作和动画 转至元数据结尾 我们后台可能用到的页面一般都是用jquery取值赋值的,发现一片不错的文章 目录 JQuery总结一:选择器归 ...

  6. DOM遍历

    前面的话 DOM遍历模块定义了用于辅助完成顺序遍历DOM结构的类型:Nodeiterator和TreeWalker,它们能够基于给定的起点对DOM结构执行深度优先(depth-first)的遍历操作. ...

  7. JS数组与对象的遍历方法大全

    本文简单解析各种数组和对象属性的遍历方法: 原生for循环.for-in及forEach ES6 for-of方法遍历类数组集合 Object.key()返回键名的集合 jQuery的$.each() ...

  8. jquery中each的3种遍历方法

    1.选择器+遍历 $('div').each(function (i){ i就是索引值 this 表示获取遍历每一个dom对象 }); 2.选择器+遍历 $('div').each(function  ...

  9. jQuery 源码分析&lpar;十九&rpar; DOM遍历模块详解

    jQuery的DOM遍历模块对DOM模型的原生属性parentNode.childNodes.firstChild.lastChild.previousSibling.nextSibling进行了封装 ...

随机推荐

  1. windows 程序设计自学&colon;添加图标资源

    #include <windows.h> #include "resource.h" LRESULT CALLBACK MyWndProc( HWND hwnd, // ...

  2. CMD魔法堂:CMD进入指定目录

    一.前言 每次打开cmd默认目录总是当前用户目录,然后是一大轮cd命令才进入工作目录,哎,怎一个烦自了得.幸好我们可以通过批处理文件来进入指定目录,省心多了. 二.cmd命令介绍   CMD [/A ...

  3. 【Hibernate】Hibernate系列7之二级缓存

    二级缓存 7.1.概述 7.2.配置方法

  4. elr&lowbar;memory&lowbar;pool详解

    Preface Usually, memory allocation of OS is fast, especially the computer has just started. But over ...

  5. XPath在asp&period;net中查询XML -摘自网络

    .NET Framework 2.0中可以使用System.Xml.XPath命名空间下的类对XML文档进行基于路径的查询,在查询过程中需要构造类似SQL的查询字符串,该字符串遵循XPath语法.它由 ...

  6. &lbrack;PHP&rsqb; try catch在日常中的使用

    1.try catch可以捕获上一层throw的异常 2.finally是不管try或者catch任何一块有return, 最终都会执行的块 3.try也是可以捕获到call_user_func_ar ...

  7. 保存canvas

    http://www.crazybunqnq.com/2018/09/01/PythonSeleniumSaveCanvas/ http://www.webhek.com/post/save-canv ...

  8. 深入Animation&comma;在SurfaceView中照样使用Android—Tween Animation!

    第一类:Frame By Frame 帧动画( 不推荐游戏开发中使用)             所谓帧动画,就是顺序播放事先做好的图像,类似于放电影:             分析: 此种方式类似我之 ...

  9. Codeforces Beta Round &num;14 &lpar;Div&period; 2&rpar;

    Codeforces Beta Round #14 (Div. 2) http://codeforces.com/contest/14 A 找最大最小的行列值即可 #include<bits/s ...

  10. C语言头文件&num;include&lt&semi;stdlib&period;h&gt&semi;的作用

      stdlib 头文件即standard library标准库头文件 stdlib 头文件里包含了C.C++语言的最常用的系统函数 该文件包含了的C语言标准库函数的定义 stdlib.h里面定义了五 ...