Question

我有以下3个div：

<div class="price"><span>FREE</span> <div class="transaction-type">FOR SELL</div></div><br/>

<div class="price"><span>$250 USD</span> <div class="transaction-type">FOR SELL</div></div><br/>

<div class="price"><span>$800 USD</span> <div class="transaction-type">FOR SELL</div></div>

我想要做的是每次跨度包含单词"transaction-type"时隐藏"free" div。

我已经知道我可以使用这样的jquery来定位和隐藏特定的范围：

if ($('.price>span').text().indexOf('FREE') >= 0) {
$('.transaction-type').hide();
}

我的问题是我的代码还隐藏了包含与"FREE"字不同内容的所有其他范围。

您可以查看我的FIDDLE

Answer 1

您希望遍历元素并使用$(this)来引用循环的元素。然后使用：

$('.price>span').each(function() {
  if ($(this).text().indexOf('FREE') >= 0) $(this).next('.transaction-type').hide();
})

＆＃13;

$('.price>span').each(function() {
  if ($(this).text().indexOf('FREE') >= 0) $(this).next('.transaction-type').hide();
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="price"><span>FREE</span>
  <div class="transaction-type">FOR SELL</div>
</div>
<br/>

<div class="price"><span>$250 USD</span>
  <div class="transaction-type">FOR SELL</div>
</div>
<br/>

<div class="price"><span>$800 USD</span>
  <div class="transaction-type">FOR SELL</div>
</div>

＆＃13;

Answer 2

可以使用:contains选择器和siblings()或next()来定位特定实例

$('.price>span:contains("FREE")').siblings('.transaction-type').hide()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="price"><span>FREE</span> <div class="transaction-type">FOR SELL</div></div><br/>

<div class="price"><span>$250 USD</span> <div class="transaction-type">FOR SELL</div></div><br/>

<div class="price"><span>$800 USD</span> <div class="transaction-type">FOR SELL</div></div>

Answer 3

您可以使用模式<

检查区分大小写

   $('.price > span').each(function(){
    if ($(this).text()==="FREE"){
    $(this).next().hide();
    }
    })

Answer 4

如果您使用contains，最后仍会有一个jQuery对象，您只需使用hide()隐藏它：

$('.price>span:contains("FREE")').hide()

当另一个div包含带有jquery的特定文本时，隐藏div的跨度

4 个答案: