首页课程jQuery Fun ClassTraverse

Traverse

目录列表

DOM遍历

DOM遍历

jQuery有很多有用的DOM遍历方法。

parent()方法返回所选元素的直接父元素。 例如:

HTML:

<div> div element
  <p>paragraph</p> 
</div>

JS:

var e = $("p").parent();
e.css("border", "2px solid red");

上面的代码选择了段落的父元素,并为其设置了一个红色边框。

运行代码查看最后结果。


以下HTML中<p>元素的父元素是哪个元素? <div><ul> <li><p></p></li> </ul></div>

DOM遍历父类元素

parent()方法只能遍历单个级别的DOM树。

要获取所选元素的所有祖先,可以使用parents()方法。 例如:

HTML:

<body>
  <div style="width:300px;"> div
    <ul> ul
      <li> li
        <p>paragraph</p>
      </li>
    </ul>   
  </div>
</body>

JS:

$(function() {
  var e = $("p").parents();
  e.css("border", "2px solid red");
});

上面的代码为段落的所有父类设置了一个红色边框。

下面是一些最常用的遍历方法如下:


1509004962962365.png

将代码补充完整以选择div元素的所有兄弟节点并调用它们上的hide()方法。

  items = $(".div").();

 .hide();


eq()方法

eq()方法可用于从多个选定元素中选择特定元素。

例如,如果页面包含多个div元素,并且我们要选择第三个元素:

$("div").eq(2);

索引号从0开始,所以第一个元素的索引号为0。


<p>a</p> <p>b</p> <p>c</p> 以下代码后输出什么?alert($("p").eq(1).text());