为标题行添加样式

$(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(),after(),prepend(),insertAfter(),节点删除,遍历方法each())

    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的遍历方法(each、forEach)总结

    起因 在工作中,需要在遍历的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 源码分析(十九) DOM遍历模块详解

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

随机推荐

  1. C#窗体 自定义控件

    1 using System; 2 using System.Collections.Generic; 3 using System.ComponentModel; 4 using System.Dr ...

  2. windows系统上安装与使用Android NDK r5 (转)

    windows系统上安装与使用Android NDK r5  很早就听说了android的NDK应用,只是一直没有时间去研究,今天花了点时间在windows平台搭建了NDK环境,并成功运行了第一个简单 ...

  3. call()\apply()\bind()备忘录

    这几个玩意儿几乎看一次忘一次,每次用都要重新看一遍,还是理解的不够.本文对不做深入解释,只根据自己的理解对函数定义进行语义化说明. 1.call() fun.call(context,arg1,arg ...

  4. Unity随机随学

    1.什么是渲染管道? 是指在显示器上为了显示出图像而经过的一系列必要操作.渲染管道中的步骤很多,都要将几何物体从一个坐标系中变换到另一个坐标系中去. 主要步骤有: 本地坐标->视图坐标-> ...

  5. 面试题-链表反转c实现

    // ListReverse.cpp : Defines the entry point for the console application.// #include "stdafx.h& ...

  6. 为您详细比较三个 CSS 预处理器(框架):Sass、LESS 和 Stylus

    CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架.本文向你介绍使用最为普遍的三款 CSS 预处理器框架,分别是 Sass.Less CSS.Stylus. 首先我们 ...

  7. SVN merge的主干,分支的相互合并操作

    本文只研究了 在本地如何进行主干,分支的相互合并 的操作:从主干到分支,从分支到主干. 本地客户端工具是tortoisesvn 测试用例. 1.本地添加test文件夹 在test文件夹下分别建立tru ...

  8. python : HTML+CSS (定时器轮寻)

    定时器轮寻 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  9. shiro 从入门到放弃

    Apache Shiro是Java的一个安全框架.目前,使用Apache Shiro的人越来越多,因为它相当简单,对比Spring Security,可能没有Spring Security做的功能强大 ...

  10. js页面刷新之实现定时刷新(定时器,meta)

    测试页面的代码见上一篇博客 接下来进入正题-定时不断刷新页面的方法: 1.看到定时,很容易想到js的定时器: //第一种方法 //由于我们已经有了一个定时器,所以只要在定时器test中加入一句刷新页面 ...