CODEWITHSUNDEEP
jqueryjquery-selectorsparent
Scott Eldo
Scott Eldo

Reputation: 473

jQuery find next div within a parent of $this

I'm having troubles targeting a particular div within a loop of divs.

My code below is a single item that is duplicated many times on a page. If the span with the class of edd_price has the text 'Free' inside it I want to hide the div class 'vat' of just this item.

<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>

Everything I've tried either affects nothing or all the items on the page, heres what I think should work -

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

Upvotes: 3

Views: 1088

Answers (3)

user5347138
user5347138

Reputation:

The condition is: 

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

and use this inside:

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

Upvotes: 1

Marcelo Machado
Marcelo Machado

Reputation: 1399

First of all your condition is not working, the contains method should be this way:

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

Take a look here: http://www.w3schools.com/jquery/sel_contains.asp

In condition you have to get the element again because your this isn't him. This is not a callback. Then:

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

Here is the demo: https://jsfiddle.net/87qcfng8/

Ps: Your first div is not closed, so close it.

Upvotes: 2

dfsq
dfsq

Reputation: 193291

You need to get parent node of the "Free" container (retrieved with :contains("Free") selector) and hide the next element with class .vat:

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

Here is a demo:

$('.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>

Upvotes: 0

Related Questions