jQuery - 试图正确使用$(this)

时间:2016-02-25 19:32:15

标签: jquery html

enter image description here

我试图使用jQuery通过结果出售作为一个类来浏览每个div。 浏览其中的2个列表项,

如果第一个列表项是:"可在线获得" 第二个是:"商店不提供。"

然后选择第二个li并删除它。

enter image description here

<script>

$('div.result-sold').each(function() {
  $('.result-sold:contains("Available Online"):contains("Not Available In Stores")');
  $(this).$( "ul li:nth-child(2)" ).css("list-style-image","none");

});

</script>

如果您将$(this)取出,它将起作用 - 除了页面上的每个第二个列表项。

使用其失败的回答+我有的编辑:

<script>     
$('div.result-sold').each(function() {

  if ($(this).find(':contains(Availabe online)') && $(this).find(':contains(Availabe online)').next(':contains(Not Available in stores)')) {

    $(this).find('li:contains(Not Available in stores)').remove();
  }
});

  $('div.result-sold').each(function() {

  if ($(this).find(':contains(Temporarily Sold Out Online)') && $(this).find(':contains(Temporarily Sold Out Online)').next(':contains(Available in stores)')) {

    $(this).find('li:contains(Temporarily Sold Out Online)').remove();
  }  
});
</script>

然而,它正在删除&#34;暂时售罄&#34;来自&#34;在商店中不可用&#34;而不是&#34;可在商店购买&#34;。

enter image description here

2 个答案:

答案 0 :(得分:0)

我不知道$函数是否可以被链接,但我不希望这样。将选择器限制为特定父级元素的正确方法是将该父级作为第二个参数传递:

$( "ul li:nth-child(2)", this )

由于您还需要按文本进行过滤,为什么不一步完成所有操作并删除each。类似的东西:

$('div.result-sold li:contains("Available Online") + li:contains("Not Available In Stores")')
  .css("list-style-image","none");

答案 1 :(得分:0)

您可以使用:

 $('div.result-sold').each(function() {

 if($(this).find('li:contains("Available online")').length>0 && 
    $(this).find('li:contains("Available online")').next('li:contains("Not Available in stores")').length>0){   

        $(this).find('li:contains(Not Available in stores)').css("list-style-image","none");   

       }  
  }); 

在每个div.result-sold if if包含可用在线文字的元素,next元素contains文字在商店中不可用,然后将此css应用于包含在商店中不可用 (remove list image)

的元素

问题的第二部分,应检查if条件中的确切文本:

$('div.result-sold').each(function() {

 if($(this).find('li:contains("Temporarily Sold Out Online")').length>0 && 
     $(this).find('li:contains("Temporarily Sold Out Online")').next().text()==="Available in stores"){     

         $(this).find('li:contains("Temporarily Sold Out Online")').remove(); 
   }  
}); 

检查下面的代码段

&#13;
&#13;
$('div.result-sold').each(function() {


  if ($(this).find('li:contains("Available online")').length > 0 &&
    $(this).find('li:contains("Available online")').next('li:contains("Not Available in stores")').length > 0) {

    console.log("g");
    $(this).find('li:contains(Not Available in stores)').css("list-style-type", "none");

  }
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="result-product">
  <div class="result-sold">
    <ul>
      <li class="sold-instock">Available online</li>
      <li class="sold-not-sold">Not Available in stores</li>

    </ul>

  </div>

</div>


<div class="result-product">
  <div class="result-sold">
    <ul>
      <li class="sold-instock">Available online</li>
      <li class="in-stock">In stock</li>

    </ul>

  </div>

</div>
<div class="result-product">
  <div class="result-sold">
    <ul>
      <li class="sold-instock">Available online</li>
      <li class="sold-not-sold">Not Available in stores</li>

    </ul>

  </div>

</div>
&#13;
&#13;
&#13;