Question

仅当class=".basket__item-cell.basket__item-qty"等于 “020-01119” 时，我才会尝试使用hidden-sku删除div。

我尝试过使用.each（function）或.next（）的不同方法，但无法理解它。为了说明这个例子，我在下面添加了代码。

请注意，我无法添加任何ID或类，行的顺序可能会有所不同。

(function($) {
  $('.hidden-sku').filter(function() {
    return $(this).text().indexOf("020-01119") !== false;
  }).closest(".basket__item-cell.basket__item-name").next(".basket__item-cell.basket__item-qty").remove();
})(jQuery)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="basket__item-data basket__item-data--right">
  <div class="basket__item-cell basket__item-name">
    <h2 class="product-name">One </h2>
    <span class="hidden-sku">020-01119</span>
  </div>
  <div class="basket__item-cell basket__item-price">
    <span class="cart-price"><span class="price"><span class="currency"></span>18</span>
    </span>
  </div>
  <div class="basket__item-cell basket__item-qty">
    <div class="input-combobox main-input-combobox input-combobox__with-qty" data-label="Qty" data-range-min="1" data-range-max="12">1
    </div>
  </div>
</div>

<div class="basket__item-data basket__item-data--right">
  <div class="basket__item-cell basket__item-name">
    <h2 class="product-name">Two </h2>
    <span class="hidden-sku">020-01117</span>
  </div>
  <div class="basket__item-cell basket__item-price">
    <span class="cart-price"><span class="price"><span class="currency"></span>18</span>
    </span>
  </div>
  <div class="basket__item-cell basket__item-qty">
    <div class="input-combobox main-input-combobox input-combobox__with-qty" data-label="Qty" data-range-min="1" data-range-max="12">2
    </div>
  </div>
</div>

<div class="basket__item-data basket__item-data--right">
  <div class="basket__item-cell basket__item-name">
    <h2 class="product-name">Three </h2>
    <span class="hidden-sku">020-01118</span>
  </div>
  <div class="basket__item-cell basket__item-price">
    <span class="cart-price"><span class="price"><span class="currency"></span>18</span>
    </span>
  </div>
  <div class="basket__item-cell basket__item-qty">
    <div class="input-combobox main-input-combobox input-combobox__with-qty" data-label="Qty" data-range-min="1" data-range-max="12">3
    </div>
  </div>
</div>

Answer 1

注意如何使用indexOf()检查字符串是否存在：

(function($) {
  $('.hidden-sku').filter(function() {
    return $(this).text().indexOf("020-01119") > -1;
  }).closest(".basket__item-cell.basket__item-name").next(".basket__item-cell.basket__item-qty").remove();
})(jQuery)

Answer 2

这将完成这项工作，可以说它更容易理解它正在做什么。

我还假设SKU总是020-01119并且永远不会只包含那个字符串？如果不是这种情况，只需将indexOf放回if条件。

(function($) {
  $('.basket__item-data').each(function () {
    var sku = $('.hidden-sku', this);

    if (sku.text() === '020-01119') {
      $('.basket__item-cell.basket__item-qty', this).remove();
    }
  });
})(jQuery);

Answer 3

.closest(".basket__item-cell.basket__item-name")
.next(".basket__item-cell.basket__item-qty")
.remove();

.next()只获取下一个DOM节点，然后将其与您指定的类进行比较。

在您的情况下，-price与-name之间的-qty

<div class="basket__item-cell basket__item-name">
<div class="basket__item-cell basket__item-price">
<div class="basket__item-cell basket__item-qty">

所以它得到-name，然后下一个，-price，并说，这是-qty，它不是，所以不给你{{{ 1}}。

以下是替换.next（）的一些想法：

.remove()

当另一个span元素包含特定文本时删除同级div

3 个答案: