CODEWITHSUNDEEP
jquery
Toasterdroid
Toasterdroid

Reputation: 51

Using jQuery :contains for two different divs

I have a rare situation where I want to hide content ONLY if two things are true on the page. One, I need to see if the persons balance is $0 AND check if the tour they've selected contains the word 'Closed'. I'm having a tough time combining the two :contains statements.

I've tried:

$(".paid:contains('$0'),(.tour:contains('Closed')").html(function(_, html) { $(".message").hide(); });

I've tried adding a +, I've tried adding a : in-between and I've tried splitting them into two lines, but it doesn't seem to work.

I don't want to hide the 'message' div based solely on one, I need both to be true. Thanks!

Upvotes: 0

Views: 34

Answers (3)

Banana
Banana

Reputation: 7463

//check if exists an element with class '.paid' that contains '$0',
//and if exists an element with class '.tour' that contains 'Closed'
if($(".paid:contains('$0')").length>0 && $(".tour:contains('Closed')").length>0){
     $(".message").hide();   
}

Upvotes: 0

Claudio Redi
Claudio Redi

Reputation: 68400

Assuming.paid is an input control and .tour is a select you could do:

if ($('.paid').val().indexOf('$0') >= 0 && 
    $('.tour:seleted').text().indexOf('Closed') >= 0) {

   $(".message").hide();
}

EDIT

After reading your clarification, this seems what would do the trick

if ($('.paid').text() == '$0'&& $(".tour:contains('Closed')")) {

   $(".message").hide();
}

Upvotes: 1

Jack
Jack

Reputation: 9388

You could check against the length of the jQuery object.

var $els = $(".paid:contains('$0'), .tour:contains('Closed')");

// Two elements would be selected
if($els.length === 2) {
    $els.html(function(_, html) {
        $(".message").hide();
    });
}

A simple fiddle: http://jsfiddle.net/1f4r5ynd/

Upvotes: 2

Related Questions