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

Question

所以，我有一个 table，如果 dt 包含 "Quantity"，我正在尝试删除 class 'qty-holder'。我已经尝试了此代码的几种不同变体，但无法使其正常工作。

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

这是我正在研究的 fiddle 的 link：https://jsfiddle.net/04khega6/

理论上 'this' 会选择 tr 并搜索最接近的 class .qty-holder 对吗？为什么这不起作用？

Answer 1

获得对行的引用后，您可以使用 find(querySelector) 在该树中查找元素。

如果您试图隐藏元素，请使用 hide。

您的问题是如何删除class，所以您可以使用removeClass(className)删除class：

$('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">[=12=].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">.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">[=12=].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">.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">[=12=].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">.00</span>
        </span>
      </td>
    </tr>
  </tbody>
</table>

Answer 2

只需将 closest 替换为 find:

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

Answer 3

1. 看看这个选择器：

$('dt:contains("Quantity")')

请注意，没有对 this 的引用。上面的选择器将在整个页面中找到包含"Quantity" 的任何dt，而不管它属于哪个<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();

虽然你说你正在尝试 "remove the class"，但也许你想要：

$(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 循环。稍微更深入的选择器可以很容易地执行此操作。然而，当我输入这个时，承认这一点。

Answer 4

看起来你应该可以用

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

FIDDLE

Answer 5

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

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

Each row that contains element, then remove class in that row

each

jquery

conditional

this