Hide div包含特定文本，然后隐藏另一个div选项

Question

我试图弄清楚如何隐藏运输选项，以便客户看不到并选择其中一个快递选项是否包含“ Courier Rural”字样。

摘要。

如果存在Courier Rural DIV，则可以使用Hide Courier DIV （包括运费）选项。

例

<div class="shippingmethodlist">
     <div class="shippingmethod" id="trShippingMethod_1">
        <span id="tdShippingTitle_1" class="shippingmethodname">
          <label class="shippingmethod-label" >Courier</label>
        </span>
        <span class="shippingprice">
          <span id="tdShippingPrice_1">$0.00</span>
        </span>
     </div>
     <div class="shippingmethod" id="trShippingMethod_2">
        <span id="tdShippingTitle_2" class="shippingmethodname">
          <label class="shippingmethod-label" >Pick up in store</label>
        </span>
        <span class="shippingprice">
          <span id="tdShippingPrice_1">$0.00</span>
        </span>
     </div>
     <div class="shippingmethod" id="trShippingMethod_3">
        <span id="tdShippingTitle_3" class="shippingmethodname">
          <label class="shippingmethod-label" >Courier Rural</label>
        </span
        <span class="shippingprice">
          <span id="tdShippingPrice_1">$0.00</span>
        </span>
     </div>
</div>


jq(function () {
 if (jq(".shippingmethod-label").text() == "Courier Rural") {
     jq(".shippingmethod-label").text() == "Courier").hide();
 }
});

编辑：让我澄清一下，我希望整个div隐藏，而不仅仅是标签

Answer 1

如果有“ Courier Rural”标签，请使用.shippingmethod-label类遍历元素，如果文本等于“ Courier”，则隐藏其父级

$(document).ready(function() {
  if ($(".shippingmethod-label:contains('Courier Rural')").size()) {
    $(".shippingmethod-label").each(function() {
      if ($(this).html() === "Courier") {
        $(this).parent().parent().hide();
      }
    });
  }
});

JSFiddle

Answer 2

不知道您需要隐藏哪个div，然后尝试

if ($('.shippingmethod-label:contains("Courier Rural")')) {
    $('.shippingmethodlist').find('.shippingmethod-label:contains("Courier")').hide();
}

Answer 3

这是数据属性的绝佳用例。 为每个div添加一个类似于以下内容的属性：

<div class="shippingmethod" data-purpose="something"></div>

<div class="shippingmethod" data-purpose="somethingelse"></div>

然后，您可以像使用JS函数中的标签选择器一样使用data属性。

jq(function () {
    jq('.shippingmethod[data-purpose="something"]').hide();
});

编辑（基于OP的评论）

如果您不能更改模板html，并且必须在div内查找元素，则可以使用.parent（）函数。

jq(function () {
    var courierOption, hideIt;
    jq('.shippingmethod-label').each(function(index, element) {
        if (element.text() === 'Courier Rural') {
            hideIt = true;
        } else if (element.text() === 'Courier') {
            courierOption = element.parent();
        }
    });

    if (hideIt) {
        courierOption.hide();
    }
});

Answer 4

据我了解，如果存在“ Courier Rural”选项，您想隐藏其他运输选项（例如“ Courier”）。

这个有可能。 您可以执行以下操作：

var hideMe;
var shouldHide = false;

$(".shippingmethod-label").each(function() {
  var el = $(this);
  if (el.text() === "Courier") {
    hideMe = el;
  } else if (el.text() === "Courier Rural") {
    shouldHide = true;
  }
});

if (hideMe && shouldHide) {
  hideMe.hide(); // or hideMe.parent().hide(); based on your needs
}

但是，如果这是针对真实网站的，而不仅仅是思想实验，则应在后端进行处理。