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