jquery深度选择器，还是遍历li里面的值

不多说，直接上代码

<div class="body pB5 redB border_01"> 
		<ul id="ul_cartList" class="cartlistul">
			<li> 
				<span class="pro_name"> 10086.我爱你 </span> 
				<span class="pro_delete"><a　href="javascript:deleteCartAjax('10086.我爱你')">删除</a></span>
			</li> 
			<li> 
				<span class="pro_name"> 你发了.广东 </span> 
				<span class="pro_delete"><a href="javascript:deleteCartAjax('你发了.广东')">删除</a></span>
			</li>
			<li> 
				<span class="pro_name"> 你发了.集团</span> 
				<span class="pro_delete"><a href="javascript:deleteCartAjax('你发了.广东')">删除</a></span>
			</li>
		</ul> 
		
	</div> <button onclick="clickButton();">click</button> 

 我想拿到li里面class为pro_name的每个span里面的值，

function clickButton(){
			//var liList = document.getElementById("ul_cartList").getElementsByTagName("li"); 
			var liLength = $("#ul_cartList li").length;
			//alert(liLength);
			for(var i = 0; i < liLength; i++){ 
				var spanElement = $("#ul_cartList li span.pro_name")[i];
				alert(spanElement.innerHTML);
				//alert(spanElement);
				//alert($("#ul_cartList li span.pro_name")[i].innerHTML);
			} 
		}