                        課程
                    
                        /前端開發
                        
                            /jQuery
                        
                        /jQuery基礎(二)—DOM篇

jquery遍歷之each()

<!DOCTYPE?html>
<html>

<head>
????<meta?http-equiv="Content-type"?content="text/html;?charset=utf-8"?/>
????<title></title>
????<style>
????.left?{
????????width:?auto;
????????height:?150px;
????}
????
????.left?div?{
????????width:?150px;
????????height:?120px;
????????padding:?5px;
????????margin:?5px;
????????float:?left;
????????background:?#bbffaa;
????????border:?1px?solid?#ccc;
????}
????</style>
????<script?src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
????<h2>each方法</h2>
????<div?class="left?first-div">
????????<div?class="div">
????????????<ul>
????????????????<li>list?item?1</li>
????????????????<li>list?item?2</li>
????????????????<li>list?item?3</li>
????????????</ul>
????????</div>
????????<div?class="div">
????????????<ul>
????????????????<li>list?item?4</li>
????????????????<li>list?item?5</li>
????????????????<li>list?item?6</li>
????????????</ul>
????????</div>
????</div>

????<br/>
????<button>點擊：each方法遍歷元素</button>
????<button>點擊：each方法回調判斷</button>
????<script?type="text/javascript">
????$("button:first").click(function()?{
????????//遍歷所有的li
????????//修改每個li內的字體顏色
????????$("li").each(function(index,?element)?{
????????????$(this).css('color','red')
????????})

????})
????</script>
????<script?type="text/javascript">
????$("button:last").click(function()?{
????????//遍歷所有的li
????????//修改偶數li內的字體顏色
????????$("li").each(function(index,?element)?{
????????????if?(index?%?2)?{
????????????????$(this).css('color','blue')
????????????}
????????})
????})
????</script>
</body>

</html>

$("li").css('color','red') ? 也可以將li顏色都變為紅色，但為什么要用$("li").each(function(index,element){$(this).css('color','red')})呢？ ?還是說兩個都行，關鍵應用是下面那個偶數行的應用？