来自以下网页代码:
(现在不要通读它 - 只需跳过它并查看我需要从以下代码中获取的内容,然后您就可以回到这段代码。
<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>
我需要抓住以下项目:
alt="2806" 的 2806 部分
值="35"的 35 部分标题="数量"
alt="1120" 的 1120 部分
值="104"的 104 部分标题="数量"
alt="2922" 的 2922 部分
值="3"的 3 部分标题="数量"
alt="1666" 的 1666 部分
值="22"的 22 部分标题="数量"
我看过这个页面:
Javascript:如何遍历页面上的所有 DOM 元素?
和这个页面:
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" />
我将继续为此而挣扎,看看我是否能自己弄清楚,但可能性对我不利。
感谢您提供的任何帮助!
你可以使用三维 JavaScript 对象来做到这一点:
jsFiddle 演示
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 立即被代码隐藏。如果可见,它只是显示代码已损坏,而无需按下任何按钮。
引用:
JavaScript 中的多维关联数组
javascript 或 jquery:循环多维对象