每行包含元素，然后删除该行中的类

时间：2017-07-18 19:40:08

标签： jquery conditional this each

所以，我有一张桌子，我试图删除这个班级的数字持有者＆＃39;如果一个dt包含＆＃34;数量＆＃34;。我已尝试过此代码的几种不同版本，无法使其正常工作。

$('tr').each(function(){
    if ( $('dt:contains("Quantity")').length > 0 ) {
        $(this).closest('.qty-holder').css('display','none');
    }
})

这是我正在处理的小提琴的链接：https://jsfiddle.net/04khega6/

理论上＆＃39;这个＆＃39;会选择tr并搜索最接近的类.qty-holder对吗？为什么这不起作用？

5 个答案:

答案 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();
    }
})

JSfiddle

所有这一切，您根本不需要each循环。稍微深入的选择器可以很容易地执行此操作。但是当我打字时，Adeneo posted an answer承认了这一点。

答案 1 :(得分：1)

看起来你应该只用

来做 
$('tr:has(dt:contains("Quantity")) .qty-holder').css('display','none');

FIDDLE

答案 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">&nbsp;</th>
      <th rowspan="1">&nbsp;</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');
  }
})
相关问题
最新问题