如何正确使用jQuery这个？

Question

我对如何在 jQuery 中正确使用 $(this) 感到困惑。我有一个价格列表，如果价格是“免费”，我想隐藏一个 sup 标签

这是我的 HTML -

<li class="price">
  <h2><sup>$</sup><sub>Price</sub></h2>
</li>

这是我要隐藏的jQuery'sup'

if(
    $("h2:contains(Free)") 
){
    ('sup').css('display', 'none');
};

但我不想隐藏所有价格，我只想锁定列表中“免费”的价格。

我在想 -

if(
    $(".price h2:contains(Free)") 
){
    $this.('sup').css('display', 'none');
};

如何在这种情况下使用 $(this) 进行定位？

Answer 1

您不需要使用 $(this)。您可以使用单个 select 或 select 匹配 .price 元素内的 <sup> 来完成这一切。

$(".price:contains(Free) sup").hide();

Answer 2

您可以定位 h2 sub:contains(Free) 并使用 prev() 定位 <sup>

$('.price h2 sub:contains(Free)').prev('sup').hide()

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="price">
  <h2><sup>$</sup><sub>Price</sub></h2>
</li>
<li class="price">
  <h2><sup>$</sup><sub>Free</sub></h2>
</li>
<li class="price">
  <h2><sup>$</sup><sub>Price</sub></h2>
</li>



</ul>

Answer 3

您可以使用 JQuery 中的 siblings and children 选择器来修改同一级别或以下级别的元素，如下所示：

 $("h2:contains(Free)").children().css('display', 'none');

如何正确使用jQuery这个？

How to properly use jQuery This?

jquery

this