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

不多说，直接上代码

Html代码  

1. <div class="body pB5 redB border_01">   
2.         <ul id="ul_cartList" class="cartlistul">  
3.             <li>   
4.                 <span class="pro_name"> 10086.我爱你 </span>   
5.                 <span class="pro_delete"><a　href="javascript:deleteCartAjax('10086.我爱你')">删除</a></span>  
6.             </li>   
7.             <li>   
8.                 <span class="pro_name"> 你发了.广东 </span>   
9.                 <span class="pro_delete"><a href="javascript:deleteCartAjax('你发了.广东')">删除</a></span>  
10.             </li>  
11.             <li>   
12.                 <span class="pro_name"> 你发了.集团</span>   
13.                 <span class="pro_delete"><a href="javascript:deleteCartAjax('你发了.广东')">删除</a></span>  
14.             </li>  
15.         </ul>   
16.           
17.     </div> <button onclick="clickButton();">click</button>   

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

Js代码  

1. function clickButton(){  
2.             //var liList = document.getElementById("ul_cartList").getElementsByTagName("li");   
3.             var liLength = $("#ul_cartList li").length;  
4.             //alert(liLength);  
5.             for(var i = 0; i < liLength; i++){   
6.                 var spanElement = $("#ul_cartList li span.pro_name")[i];  
7.                 alert(spanElement.innerHTML);  
8.                 //alert(spanElement);  
9.                 //alert($("#ul_cartList li span.pro_name")[i].innerHTML);  
10.             }   
11.         }