jQuery 遍历 - each() 方法 实例

输出每个 li 元素的文本：

$("button").click(function(){ $("li").each(function(){ alert($(this).text()) }); }); 定义和用法

each() 方法规定为每个匹配元素规定运行的函数。

提示：返回 false 可用于及早停止循环。

语法 $(selector).each(function(index,element))

参数 描述

function(index,element)

必需。为每个匹配元素规定运行的函数。

index - 选择器的 index 位置

element - 当前的元素（也可使用 "this" 选择器）

jQuery 参考手册 - 属性操作 jQuery 属性操作方法

下面列出的这些方法获得或设置元素的 DOM 属性。

这些方法对于 XML 文档和 HTML 文档均是适用的，除了：html()。

方法 描述

addClass() 向匹配的元素添加指定的类名。

attr() 设置或返回匹配元素的属性和值。

hasClass() 检查匹配的元素是否拥有指定的类。

html() 设置或返回匹配的元素集合中的 HTML 内容。

removeAttr() 从所有匹配的元素中移除指定的属性。

removeClass() 从所有匹配的元素中删除全部或者指定的类。

toggleClass() 从匹配的元素中添加或删除一个类。

val() 设置或返回匹配元素的值。

例：

<div class="ui-west"> <div class="ui-west-area"> <h3 class="tpl" style="color: #878787; text-align: ritht;">导航</h3> <ul class="left-nav"> <li class="" ref="0"></li> <li class="cur" ref="1"> <a href="#"><span>组织机构</span></a> <i class="selected"></i> <ul class="left-nav-sub"> <li ref="0"> <a href="/eem/eem/org/list.do">应急处置机构</a> </li> <li ref="1"> <a href="/eem/eem/monitorunit/list.do">应急监测机构</a> </li> </ul> </ul> </div> </div>

function leftNavInit() { var e = $(".left-nav > li"), t = $(".left-nav-sub > li"); $("ul.left-nav-sub").hide(), e.each(function() { var e = $(this); //e遍历 当<i class="selected"> 显示四级菜单 if(e.find("i").hasClass("selected"))//如果i的class为selected，则显示<ul class="left-nav-sub"> { e.find("ul.left-nav-sub").show(); } e.click(function() { $("ul.left-nav-sub").slideUp(), $("ul.left-nav").find("i").removeClass("selected"), 0 != e.find("i").length && (e.find("i").addClass("selected"), 0 == e.find("ul.left-nav-sub").is(":visible") ? e.find("ul.left-nav-sub").slideDown() : e.find("ul.left-nav-sub").slideUp()), $(".left-nav-sub > li").removeClass("cur"), $(".left-nav > li").removeClass("cur"), e.addClass("cur") }) }), t.each(function() { var e = $(this); e.click(function(t) { t.stopPropagation(), $(".left-nav-sub > li").removeClass("cur"), e.addClass("cur") }) }) }