所以,我有一张桌子,我试图删除这个班级的数字持有者'如果一个dt包含"数量"。我已尝试过此代码的几种不同版本,无法使其正常工作。
$('tr').each(function(){
if ( $('dt:contains("Quantity")').length > 0 ) {
$(this).closest('.qty-holder').css('display','none');
}
})
这是我正在处理的小提琴的链接:https://jsfiddle.net/04khega6/
理论上'这个'会选择tr并搜索最接近的类.qty-holder对吗?为什么这不起作用?
答案 0 :(得分:2)
1。看看这个选择器:
$('dt:contains("Quantity")')
请注意,没有this
的引用。上面的选择器会在整个页面上找到包含dt
的任何"Quantity"
,无论它属于哪个<tr>
。假设您想将其与当前<tr>
相对应,则您需要使用$(this).find()
。
//Select all <dt> that contain quantity *in the current <tr>*
$(this).find('dt:contains("Quantity")')
2。 closest()
遍历 up DOM树。如果您正在寻找一个子(或更深)元素,您可以使用.find()
。此外,.hide()
与.css("display", "none");
$(this).find('.qty-holder').hide();
虽然你说你正试图“删除课程”,但也许你想要:
$(this).find('.qty-holder').removeClass("qty-holder");
总而言之,它看起来像这样:
(顺便说一句,我已将$(this)
声明为变量$this
。)
$('tr').each(function() {
var $this = $(this);
if ($this.find('dt:contains("Quantity")').length > 0) {
$this.find('.qty-holder').hide();
}
})
所有这一切,您根本不需要each
循环。稍微深入的选择器可以很容易地执行此操作。但是当我打字时,Adeneo posted an answer承认了这一点。
答案 1 :(得分:1)
答案 2 :(得分:1)
closest()
只查找祖先树,但您要查找的元素不是该行的后代的祖先......所以您要使用find()
大概你只想在行实例有<dt>
的情况下这样做,所以也使用find()
$('tr').each(function() {
var $row = $(this);
if ($row.find('dt:contains("Quantity")').length) {
$row.find('.qty-holder').removeClass('qty-holder');
}
});
或使用:has
选择器
$('tr:has(dt:contains("Quantity")) .qty-holder').removeClass('qty-holder');
的 DEMO 强>
答案 3 :(得分:0)
获得对该行的引用后,您可以使用find(querySelector)
在该树中查找元素。
如果您尝试隐藏元素,请使用hide
。
您的问题询问如何删除课程,因此您可以使用removeClass(className)
删除课程:
$('tr').each(function(){
if ( $(this).find('dt:contains("Quantity")').length > 0 ) {
$(this).find('.qty-holder').removeClass('qty-holder');
}
这是一个有效的例子:
function removeQty()
{
$('tr').each(function() {
if ($(this).find('dt:contains("Quantity")').length > 0) {
$(this).find('.qty-holder').removeClass('qty-holder');
}
})
}
$(document).ready(function() {
removeQty();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="shopping-cart-table" class="data-table cart-table">
<thead>
<tr class="first last">
<th rowspan="1"> </th>
<th rowspan="1"> </th>
<th rowspan="1"><span class="nobr">Product Name</span></th>
<th colspan="1"><span class="nobr">Unit Price</span></th>
<th rowspan="1">Qty</th>
<th class="last" colspan="1">Subtotal</th>
</tr>
</thead>
<tfoot>
<tr class="first last">
<td colspan="50" class="a-right last">
<button type="button" title="Continue Shopping" class="button btn-continue" onclick="setLocation('http://www.printnow123.com/')"><span><span>Continue Shopping</span></span></button>
<button type="submit" name="update_cart_action" value="update_qty" title="Update Shopping Cart" class="button btn-update"><span><span>Update Shopping Cart</span></span></button>
<button type="submit" name="update_cart_action" value="empty_cart" title="Clear Shopping Cart" class="button btn-empty" id="empty_cart_button"><span><span>Clear Shopping Cart</span></span></button>
<!--[if lt IE 8]>
<input type="hidden" id="update_cart_action_container" />
<script type="text/javascript">
//<![CDATA[
Event.observe(window, 'load', function()
{
// Internet Explorer (lt 8) does not support value attribute in button elements
$emptyCartButton = $('empty_cart_button');
$cartActionContainer = $('update_cart_action_container');
if ($emptyCartButton && $cartActionContainer) {
Event.observe($emptyCartButton, 'click', function()
{
$emptyCartButton.setAttribute('name', 'update_cart_action_temp');
$cartActionContainer.setAttribute('name', 'update_cart_action');
$cartActionContainer.setValue('empty_cart');
});
}
});
//]]>
</script>
<![endif]-->
</td>
</tr>
</tfoot>
<tbody>
<tr class="first odd">
<td class="action-td">
<a href="http://www.printnow123.com/checkout/cart/delete/id/7/form_key/Y2jY96Qm2Wwtdmx5/uenc/aHR0cDovL3d3dy5wcmludG5vdzEyMy5jb20vY2hlY2tvdXQvY2FydC8,/" title="Remove item" class="btn-remove btn-remove2"></a>
</td>
<td class="pr-img-td">
<a href="http://www.printnow123.com/test-2.html" title="Test 2" class="product-image"><img src="http://www.printnow123.com/media/catalog/product/cache/1/thumbnail/80x80/9df78eab33525d08d6e5fb8d27136e95/x/f/xframebannerstand.jpg" width="80" height="80" alt="Test 2"></a>
</td>
<td class="product-name-td">
<h2 class="product-name">
<a href="http://www.printnow123.com/test-2.html">Test 2</a>
</h2>
<dl class="item-options">
<dt>Paper Type Test</dt>
<dd>Standard </dd>
<dt>Quantity</dt>
<dd>30</dd>
</dl>
</td>
<td>
<span class="cart-price">
<span class="price">$0.50</span>
</span>
</td>
<td>
<div class="qty-holder">
<a href="javascript:void(0)" class="table_qty_dec">-</a><input name="cart[7][qty]" value="30" size="4" title="Qty" class="input-text qty" maxlength="12"><a href="javascript:void(0)" class="table_qty_inc">+</a>
<a class="edit-qty" href="http://www.printnow123.com/checkout/cart/configure/id/7/" title="Edit item parameters"><i class="icon-pencil"></i></a>
</div>
</td>
<td class="td-total last">
<span class="cart-price">
<span class="price">$15.00</span>
</span>
</td>
</tr>
<tr class="even">
<td class="action-td">
<a href="http://www.printnow123.com/checkout/cart/delete/id/9/form_key/Y2jY96Qm2Wwtdmx5/uenc/aHR0cDovL3d3dy5wcmludG5vdzEyMy5jb20vY2hlY2tvdXQvY2FydC8,/" title="Remove item" class="btn-remove btn-remove2"></a>
</td>
<td class="pr-img-td">
<a href="http://www.printnow123.com/test-2.html" title="Test 2" class="product-image"><img src="http://www.printnow123.com/media/catalog/product/cache/1/thumbnail/80x80/9df78eab33525d08d6e5fb8d27136e95/x/f/xframebannerstand.jpg" width="80" height="80" alt="Test 2"></a>
</td>
<td class="product-name-td">
<h2 class="product-name">
<a href="http://www.printnow123.com/test-2.html">Test 2</a>
</h2>
<dl class="item-options">
<dt>Paper Type Test</dt>
<dd>Glossy </dd>
<dt>Quantity</dt>
<dd>30 </dd>
</dl>
</td>
<td>
<span class="cart-price">
<span class="price">$0.50</span>
</span>
</td>
<td>
<div class="qty-holder">
<a href="javascript:void(0)" class="table_qty_dec">-</a><input name="cart[9][qty]" value="30" size="4" title="Qty" class="input-text qty" maxlength="12"><a href="javascript:void(0)" class="table_qty_inc">+</a>
<a class="edit-qty" href="http://www.printnow123.com/checkout/cart/configure/id/9/" title="Edit item parameters"><i class="icon-pencil"></i></a>
</div>
</td>
<td class="td-total last">
<span class="cart-price">
<span class="price">$15.00</span>
</span>
</td>
</tr>
<tr class="last odd">
<td class="action-td">
<a href="http://www.printnow123.com/checkout/cart/delete/id/11/form_key/Y2jY96Qm2Wwtdmx5/uenc/aHR0cDovL3d3dy5wcmludG5vdzEyMy5jb20vY2hlY2tvdXQvY2FydC8,/" title="Remove item" class="btn-remove btn-remove2"></a>
</td>
<td class="pr-img-td">
<a href="http://www.printnow123.com/test-business-card.html" title="Test Business Card" class="product-image"><img src="http://www.printnow123.com/media/catalog/product/cache/1/thumbnail/80x80/9df78eab33525d08d6e5fb8d27136e95/s/i/simple-b-card.jpg" width="80" height="80" alt="Test Business Card"></a>
</td>
<td class="product-name-td">
<h2 class="product-name">
<a href="http://www.printnow123.com/test-business-card.html">Test Business Card</a>
</h2>
</td>
<td>
<span class="cart-price">
<span class="price">$0.05</span>
</span>
</td>
<td>
<div class="qty-holder">
<a href="javascript:void(0)" class="table_qty_dec">-</a><input name="cart[11][qty]" value="500" size="4" title="Qty" class="input-text qty" maxlength="12"><a href="javascript:void(0)" class="table_qty_inc">+</a>
<a class="edit-qty" href="http://www.printnow123.com/checkout/cart/configure/id/11/" title="Edit item parameters"><i class="icon-pencil"></i></a>
</div>
</td>
<td class="td-total last">
<span class="cart-price">
<span class="price">$25.00</span>
</span>
</td>
</tr>
</tbody>
</table>
答案 4 :(得分:0)
只需将closest
替换为find
:
$('tr').each(function() {
if ($('dt:contains("Quantity")').length > 0) {
$(this).find('.qty-holder').css('display', 'none');
}
})