March 11, 2012
Show DIV > SPAN only when DIV > TABLE >TR is visible
Question by Saif Bechan
I have a layout that looks like this
<div class="categoery">
<span>categorie title</span>
<table>
<tr class="item show">....</tr>
<tr class="item show">....</tr>
<tr class="item none">....</tr>
</table>
</div>
<div class="categoery">
<span>categorie title</span>
<table>
<tr class="item none">....</tr>
<tr class="item none">....</tr>
<tr class="item none">....</tr>
</table>
</div>
Now what I want to the is the following. The first div will be the category title, and the two rows.
Now in the second div, I want the whole div completely hidden.
CSS has no parent seelctor like: div < tr.none{ display:none; }.
I asume another thing I can use is the hasClass from jQuery, but I was wondering if there is a pure CSS approuch.
==
Maybe something like setting the div to height:0, but block elements(tr) with a top margin will force the div to expand??
Hope this makes sense.
Answer by Starx
You can do something like this
$('.categoery').each(function(k,v) {
if($(this).children('table').find("tr").css("display")=='none') {
// alternate
//if($(this).children('table').find("tr").hasClass("none")) {
$(this).children('span').hide();
}
});
I even created a demo. I hope this was what was asked for.
