Hide some elements in a html node depending on content

Question

I would like to hide some childrend elements of a div that have some specific values: Lets say we have this structrure :

<div classe="parent" >
    <div class="child" >
    <img class="image" src="">
        <div class="class1">
        <a href="#" class="calsse2">someLink</a>
        <div class="class3">myValue</div>
    </div>
    </div>
</div>

Inside "parent" node there are several "child"ren nodes :

I would like to hide the "child"ren nodes where myValue which is an int is greater or lower than a given value.

I was trying :

$('.parent').each(function(){
     var n = parseInt($('.classe3').text().substring(0,2), 10);
     if(n > value){
          this.hide();
        } 
})

It is not working quite well!

1. Why parse your text field - myValue is not a number ? 2. $('.parent').each i think is wrong. Correct must be $('.parent').children().each - Correct ??? — d.danailov, Jul 06 '13 at 11:55
I need to make the
invisible when the element class3 contains a specific value :
myValue — Mehdi, Jul 07 '13 at 19:11

A. Wolff · Answer 1 · 2013-07-06T12:01:19.320

0

DEMO

var searchValue = 500;
$('.parent').find('.class3').show().filter(function () {
    return +$.trim($(this).text()) !== searchValue // or '<' or '>'
}).hide();

BTW, you have a typo here:

<div classe="parent" >

Must be:

<div class="parent" >

edited Jul 06 '13 at 12:01

answered Jul 06 '13 at 11:55

A. Wolff

74,033
9
94
155

score 0 · Answer 2 · answered Jul 06 '13 at 12:03

0

Try this:

$(div:contains("myValue")).filter(:parent).hide();

answered Jul 06 '13 at 12:03

Lightsaber

125
1
8

nnnnnn · Answer 3 · 2013-07-06T12:22:35.820

"where myValue which is an int is greater or lower than a given value"

The following hides all the child elements that have class3 text that is a number greater than that specified in val:

// hide elements containing a number greater than val
var val = 20;  
$(".parent .child").show().filter(function () {
    var n = $(this).find(".class3").text();
    return +n > val;
}).hide();

Demo: http://jsfiddle.net/zLHJd/

This finds all the .child elements, makes them all visible initially, then filters the list back to just those with an appropriate value and hides those. The key difference compared with the code in the question is that you have to use .find() (or some other DOM traversal method) to check only the class3 element for the current child element in the loop or filter.

The above doesn't test explicitly for an int, but will only hide those with a numeric value greater than val because the unary plus operator returns NaN if the value isn't a number, and NaN > val will always be false. If you actually want to test for an int such that numbers with decimal places are ignored (their divs not hidden), you could do this:

    return !/\D/.test(n) && +n > val;

That is, test that there are no non-digit characters in the div before testing it against val.

Hide some elements in a html node depending on content

3 Answers3