隐藏div包含某个文本，然后隐藏另一个div选项

Question

我正在想办法隐藏运输选项，这样客户就无法看到和选择其中一个快递选项是否包含"courier Rural"字样

总结。

隐藏CourierDIV（包括运费）选项如果存在Courier RuralDIV。

示例

<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

据我所知，如果存在"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
}

然而，如果这是一个真实的网站，而不仅仅是一个思想实验，那么这应该在你的后端处理。

Answer 4

这是数据属性的一个很好的用例。为每个div添加一个属性，如下所示：

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

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

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

编辑（基于OP的评论）

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

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