jQuery 在 $this 的父项中查找下一个 div

Question

我无法在 div 秒的循环中定位特定的 div。

我下面的代码是在页面上重复多次的单个项目。如果带有 edd_price 的 class 的范围内有文本 'Free' 我想隐藏仅此项目的 div class 'vat' .

<div class="product-thumb">
  <a href="http://tb.eldo.co.uk/downloads/achieving-sales-on-the-telephone-sample-notes/">
  <div class="thum">
    <img width="185" height="150" src="blah"/>
  </div>
  <div class="title">Title goes here</div>
  <div class="price">
    <span class="edd_price">Free</span> 
  </div>
  <div class="vat clear">
    price excluding 20% vat                             
  </div>
</a>

我尝试过的所有内容要么不影响任何内容，要么影响页面上的所有项目，这是我认为应该有效的方法 -

$(document).ready(function() {
if ($(".edd_price").contains("Free")) {
  $(this).parent().next('div.vat').hide();
}
});

Answer 1

您需要获取 "Free" 容器的父节点（使用 :contains("Free") 选择器检索）并使用 class 隐藏下一个元素 .vat:

$('.edd_price:contains("Free")').parent().next('.vat').hide();

这是一个演示：

$('.edd_price:contains("Free")').parent().next('.vat').hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product-thumb"> 
  <a href="http://tb.eldo.co.uk/downloads/achieving-sales-on-the-telephone-sample-notes/">
  <div class="thum">
    <img width="185" height="150" src="http://lorempixel.com/185/150"/>
  </div>
  <div class="title">Title goes here</div>
  <div class="price">
    <span class="edd_price">Free</span> 
  </div>
  <div class="vat clear">
    price excluding 20% vat                             
  </div>
</a>

Answer 2

首先你的条件不行，contains方法应该是这样的：

if ( $(".edd_price:contains(free)"))

看这里：http://www.w3schools.com/jquery/sel_contains.asp

在这种情况下你必须重新获取元素，因为你的this不是他。这不是回调。那么：

$(function() {
    if ( $(".edd_price:contains(free)")) {
        $('.edd_price:contains("Free")').parent().next('.vat').hide();
    }
});

这是演示： https://jsfiddle.net/87qcfng8/

Ps：你的第一个div没有关闭，所以关闭它。

Answer 3

条件是：

if ( $(".edd_price:contains(free)"))

并在里面使用这个：

$('.edd_price:contains("Free")').parent().next('.vat').hide();

jQuery 在 $this 的父项中查找下一个 div

jQuery find next div within a parent of $this

jquery

parent

next