Question

所以我有以下标记：

<div class="festi-cart-products-content">
    <table class="festi-cart-list">
        <tbody>
            <tr class="festi-cart-item ">
                <td class="festi-cart-product-img">
                </td>
                <td class="festi-cart-product-title">
                    <a class="festi-cart-title" href="">product name</a><br>
                    <span class="festi-cart-product-price">
                        <span class="woocommerce-Price-amount amount"></span>
                    </span>
                </td>
            </tr>
        </tbody>
    </table>
</div>

有多个tr元素，但只有一些元素的最内层跨度为“woocommerce-Price-amount”类。在“festi-cart-product-price”分类后，另一个没有任何内容。

我正在尝试使用jQuery删除其中没有“woocommerce-Price-amount”范围的所有tr元素。

jQuery( document ).ajaxComplete(function() {

    jQuery(".festi-cart-product-price:not(:has(>span))").each(function(){
        jQuery(this).parent('tr.festi-cart.item').hide();
    });

});

我一直在尝试使用：not selector，但它似乎没有产生任何东西。我真的不确定它出了什么问题。

你们中的任何人都可以发现我的代码出错的地方，或者它是否是一个完全无望的简单解决方案？

Answer 1

使用.filter函数匹配具有特定要求的元素。

使用$('tr').find('.woocommerce-Price-amount').length > 0检查tr中是否存在元素。

不仅仅是.hide()（或.remove()）过滤元素。

＆＃13;

$(document).ready(function() {
  var hasWoo = $('.festi-cart-list tr').filter(function() {
    return $(this).find('.woocommerce-Price-amount').length !== 0;
  });

  hasWoo.hide();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="festi-cart-products-content">
  <table class="festi-cart-list">
    <tbody>
      <tr class="festi-cart-item ">
        <td class="festi-cart-product-img">
        </td>
        <td class="festi-cart-product-title">
          <a class="festi-cart-title" href="">product name</a>
          <br>
          <span class="festi-cart-product-price">
                        <span class="woocommerce-Price-amount amount">WOO</span>
          </span>
        </td>
      </tr>
      <tr class="festi-cart-item ">
        <td class="festi-cart-product-img">
        </td>
        <td class="festi-cart-product-title">
          <a class="festi-cart-title" href="">product name</a>
          <br>
          <span class="festi-cart-product-price">
                        <span class="woocommerce-Price-amount amount">WOO</span>
          </span>
        </td>
      </tr>
      <tr class="festi-cart-item ">
        <td class="festi-cart-product-img">
        </td>
        <td class="festi-cart-product-title">
          <a class="festi-cart-title" href="">product name</a>
          <br>
          <span class="festi-cart-product-price">
                      EMPTY
                    </span>
        </td>
      </tr>
    </tbody>
  </table>
</div>

＆＃13;

Answer 2

您需要使用.closest() jquery方法而不是.parent()方法。

Answer 3

这个怎么样。

$("tr:not(:has(>.woocommerce-Price-amount))").hide()

未经测试。

来自这个问题：How to select elements which do not have a specific child element with JQuery值得一读这类没有特色的后代＆＃39;问题

Answer 4

你离我很近，你的选择器有效并选择没有festi-cart-product-price的{{1}}：

span

您只需使用$(".festi-cart-product-price:not(:has('>span'))")转到父母tr，然后隐藏它们：

closest()

使用selector.closest('tr').hide();检查This fiddle以查看效果。

希望这有帮助。

setTimeout()

$(function() {
  var selector = $(".festi-cart-product-price:not(:has('>span'))");

  selector.closest('tr').hide();
})

Answer 5

＆＃13;

$('.btn').click(function(){
$('.festi-cart-item').each(function(){
var price = $(this).find('.festi-cart-product-price').children().hasClass('woocommerce-Price-amount');
  if(!price)
    $(this).hide();
});
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="festi-cart-products-content">
    <table class="festi-cart-list">
        <tbody>
            <tr class="festi-cart-item ">
                <td class="festi-cart-product-img">
                </td>
                <td class="festi-cart-product-title">
                    <a class="festi-cart-title" href="">product name</a><br>
                    <span class="festi-cart-product-price">
                        <span class="woocommerce-Price-amount"></span>
                    </span>
                </td>
            </tr>
  <tr class="festi-cart-item ">
                <td class="festi-cart-product-img">
                </td>
                <td class="festi-cart-product-title">
                    <a class="festi-cart-title" href="">product name</a><br>
                    <span class="festi-cart-product-price">
                       
                    </span>
                </td>
            </tr>    
          <tr class="festi-cart-item ">
                <td class="festi-cart-product-img">
                </td>
                <td class="festi-cart-product-title">
                    <a class="festi-cart-title" href="">product name</a><br>
                    <span class="festi-cart-product-price">
                       
                    </span>
                </td>
            </tr>    
        </tbody>
    </table>
</div>

<button class="btn">remove</button>

＆＃13;

删除jquery中没有特定descendandt元素的所有元素

5 个答案: