jQuery学习(一)----each遍历&&hasClass属性

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")        })    })    }