遍歷的常見方法

1，jquery的each（）遍歷

頁面結構

<!--HTML基本結構-->
		<h1>demo元素</h1>
		<div id="content">
		     <span>更換機油</span>
		     <span>更換空調</span>
		     <span>更換汽濾</span>
		</div>
		
		<!--遍歷後-文字集合-未格式化-->
		<h1>遍歷列表-文字未格式化</h1>
		<div id="box1">
		
		</div>
		
		<!--遍歷後-文字集合-作了字符串拼接的格式化-->
		<h1>遍歷列表-文字格式化</h1>
		<div id="box2">
		
		</div>

js

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">

				$(function() {
//				     var span_len = span.length;
//				     alert(span_len)

//					$("#demo").each(function(){
//					    //you do
//					    //用$(this)能夠訪問正在循環的元素 這是each很是方便的一個地方！
//					});
				     	     
				    //遍歷列表-彈出值文本值
				    $("#content span").each( function(){
				        alert($(this).text())
				    });
				     
				    //遍歷列表-追加文本到指定元素
				    $("#content span").each( function(){
				        var now_text = $(this).text();
				        $("#box1").append(now_text);
				    });
				    
				    //遍歷列表-將文本格式化-作字符串拼接
				    $("#content span").each( function(){
				        var now_text = $(this).text();
				        $("#box2").append("<li>"+now_text+"</li>");
				    });  

			 	});
			 	
			 	
			 	
	
		</script>

顯示結果以下：