从以下网页代码:
(暂不阅读它 - 只需跳过它并查看我需要从以下代码中获取的内容然后您可以回到此代码。)
<table class="shop_table cart" cellspacing="0">
<thead>
<tr>
<th class="product-remove"> </th>
<th class="product-thumbnail"> </th>
<th class="product-name">Product</th>
<th class="product-price">Price</th>
<th class="product-quantity">Quantity</th>
<th class="product-subtotal">Total</th>
</tr>
</thead>
<tbody>
<tr class="cart_item">
<td class="product-remove">
<a href="http://dev123.MyDomain.com/cart/?remove_item=02e74f10e0327ad868d138f2b4fdd6f0&_wpnonce=2eef060511" class="remove" title="Remove this item">×</a>
</td>
<td class="product-thumbnail">
<a href="http://dev123.MyDomain.com/product/5-htp-power/">
<img width="90" height="90" src="http://dev123.MyDomain.com/wp-content/uploads/2014/04/product/2806-90x90.jpg" class="attachment-shop_thumbnail wp-post-image" alt="2806" />
</a>
</td>
<td class="product-name">
<a href="http://dev123.MyDomain.com/product/5-htp-power/">5-HTP Power</a>
</td>
<td class="product-price">
<span class="amount">$19.55</span>
</td>
<td class="product-quantity">
<div class="quantity">
<input type="number" step="1" name="cart[02e74f10e0327ad868d138f2b4fdd6f0][qty]" value="35" title="Qty" class="input-text qty text" size="4" />
</div>
</td>
<td class="product-subtotal">
<span class="amount">$97.75</span>
</td>
</tr>
<tr class="cart_item">
<td class="product-remove">
<a href="http://dev123.MyDomain.com/cart/?remove_item=6ea9ab1baa0efb9e19094440c317e21b&_wpnonce=2eef060511" class="remove" title="Remove this item">×</a>
</td>
<td class="product-thumbnail">
<a href="http://dev123.MyDomain.com/product/5-w/">
<img width="90" height="90" src="http://dev123.MyDomain.com/wp-content/uploads/2014/04/product/1120-90x90.jpg" class="attachment-shop_thumbnail wp-post-image" alt="1120" />
</a>
</td>
<td class="product-name">
<a href="http://dev123.MyDomain.com/product/5-w/">5-W</a>
</td>
<td class="product-price">
<span class="amount">$19.35</span>
</td>
<td class="product-quantity">
<div class="quantity">
<input type="number" step="1" name="cart[6ea9ab1baa0efb9e19094440c317e21b][qty]" value="104" title="Qty" class="input-text qty text" size="4" />
</div>
</td>
<td class="product-subtotal">
<span class="amount">$77.40</span>
</td>
</tr>
<tr class="cart_item">
<td class="product-remove">
<a href="http://dev123.MyDomain.com/cart/?remove_item=c16a5320fa475530d9583c34fd356ef5&_wpnonce=2eef060511" class="remove" title="Remove this item">×</a>
</td>
<td class="product-thumbnail">
<a href="http://dev123.MyDomain.com/product/7-keto/">
<img width="90" height="90" src="http://dev123.MyDomain.com/wp-content/uploads/2014/04/product/2922-90x90.jpg" class="attachment-shop_thumbnail wp-post-image" alt="2922" />
</a>
</td>
<td class="product-name">
<a href="http://dev123.MyDomain.com/product/7-keto/">7-Keto</a>
</td>
<td class="product-price">
<span class="amount">$38.25</span>
</td>
<td class="product-quantity">
<div class="quantity">
<input type="number" step="1" name="cart[c16a5320fa475530d9583c34fd356ef5][qty]" value="3" title="Qty" class="input-text qty text" size="4" />
</div>
</td>
<td class="product-subtotal">
<span class="amount">$114.75</span>
</td>
</tr>
<tr class="cart_item">
<td class="product-remove">
<a href="http://dev123.MyDomain.com/cart/?remove_item=182be0c5cdcd5072bb1864cdee4d3d6e&_wpnonce=2eef060511" class="remove" title="Remove this item">×</a>
</td>
<td class="product-thumbnail">
<a href="http://dev123.MyDomain.com/product/acidophilus/">
<img width="90" height="90" src="http://dev123.MyDomain.com/wp-content/uploads/2014/04/product/1666-90x90.jpg" class="attachment-shop_thumbnail wp-post-image" alt="1666" />
</a>
</td>
<td class="product-name">
<a href="http://dev123.MyDomain.com/product/acidophilus/">Acidophilus</a>
</td>
<td class="product-price">
<span class="amount">$15.95</span>
</td>
<td class="product-quantity">
<div class="quantity">
<input type="number" step="1" name="cart[182be0c5cdcd5072bb1864cdee4d3d6e][qty]" value="22" title="Qty" class="input-text qty text" size="4" />
</div>
</td>
<td class="product-subtotal">
<span class="amount">$31.90</span>
</td>
</tr>
<tr>
<td colspan="6" class="actions">
<div class="coupon">
<label for="coupon_code">Coupon:</label>
<input type="text" name="coupon_code" class="input-text" id="coupon_code" value="" placeholder="Coupon code" />
<input type="submit" class="button" name="apply_coupon" value="Apply Coupon" />
</div>
&#13;
我需要抓住以下内容:
alt =&#34; 2806&#34;
的2806部分值的35分=&#34; 35&#34;标题=&#34;数量&#34;
alt =&#34; 1120&#34;
的1120部分值的104部分=&#34; 104&#34;标题=&#34;数量&#34;
alt =&#34; 2922&#34;
的2922部分值的3部分=&#34; 3&#34;标题=&#34;数量&#34;
1666部分的alt =&#34; 1666&#34;
22的值=&#34; 22&#34;标题=&#34;数量&#34;
我看过这个页面:
Javascript: How to loop through ALL DOM elements on a page?
和这个页面:
http://www.w3schools.com/js/js_htmldom_nodelist.asp
而且我有点过头了。
我需要的是一些javascript代码,它将导致...包含以下内容的变量:
<input type="hidden" name="prodnum" value="2806" />
<input type="hidden" name="prodqty" value="35" />
<input type="hidden" name="prodnum" value="1120" />
<input type="hidden" name="prodqty" value="104" />
<input type="hidden" name="prodnum" value="2922" />
<input type="hidden" name="prodqty" value="3" />
<input type="hidden" name="prodnum" value="1666" />
<input type="hidden" name="prodqty" value="22" />
&#13;
我会继续为此而努力,看看我是否能够自己解决这个问题,但这种可能性并不适合我。
感谢您提供的任何帮助!
答案 0 :(得分:0)
你可以使用三维javascript对象来做到这一点:
var stObj = {};
$('#mybutt').click(function(){
var cnt = 0;
$('.shop_table tbody tr:not(:last-child)').each(function(){
//alert( this.className );
cnt++;
stObj[cnt] = {};
$this = $(this);
var thImg = $this.find('.product-thumbnail a img').attr('alt');
//alert(thImg);
var prQty = $this.find('.product-quantity div input').val();
//alert(prQty);
stObj[cnt]['thImg'] = thImg;
stObj[cnt]['prQty'] = prQty;
});
alert( JSON.stringify(stObj) );
});
注意:
(1)对象stObj
全局定义(即外部 - 上面 - 使用它的函数)
(2)jQuery选择器tr:not(:last-child)
阻止尝试在最后一行表中找到alt
和value
(3)在jsFiddle中,#tst
div立即被代码隐藏。如果可见,它只显示代码被破坏而无需按任何按钮。
参考文献: