CODEWITHSUNDEEP
javascriptjquery
Gregory Ch
Gregory Ch

Reputation: 61

If a div missing then hide an other div

I use a module in Joomla for news and takes articles dynamically. Some time, articles aren't so many and it displays empty fields because it is set to grab 7 articles.

When an article is displayed it contains this code:

<div class="ns2-row">

  <div class="ns2-row-inner">

    <div class="ns2-column flt-left col-1">
          CONTENT
    </div>
    <div style="clear:both"></div>
  </div>
  <div style="clear:both"></div>
</div>

When there is no article this is the code:

<div class="ns2-row">

  <div class="ns2-row-inner">

    <div style="clear:both"></div>
  </div>
  <div style="clear:both"></div>
</div>

What I'm thinking is: if div.ns2-column missing from div.ns2-row-inner then hide div.ns2-row

Any idea how to do that?

Upvotes: 0

Views: 204

Answers (5)

Gregory Ch
Gregory Ch

Reputation: 61

With Shadow's help I found the solution. My problem was that I had one more jQuery library and I got some problems. So, I did that:

<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
<script type="text/javascript">
var jQuery_1_8_3 = $.noConflict(true);
</script>
<script type="text/javascript">
jQuery_1_8_3('div.ns2-row-inner').filter(function(){
   return jQuery_1_8_3(this).find('div.ns2-column').length==0;
}).closest('div.ns2-row').hide();
</script>

Upvotes: 0

Rama Kathare
Rama Kathare

Reputation: 930

That script should be like this, I guess

$('.ns2-row').each(function()
{
  $(this).toggle($(this).find('ns2-row-inner .ns2-column').length > 0);
});

Upvotes: 0

empiric
empiric

Reputation: 7878

$('.ns2-row').each(function(){
    if($(this).find('.ns2-row-inner .ns2-column').length === 0){
        $(this).hide();
    }
});

Reference:

length

each

Upvotes: 0

user1017882
user1017882

Reputation: 

$('.ns2-row').each(function()
{
    $(this).toggle($(this).find('.ns2-row-inner').has('.ns2-column'));
});

Explanation: since you said "7 articles" I've used each to iterate (I assume there is more than one row). Inside the each, it will toggle the visibility of this (.ns2-row) based on whether its .ns2-row-inner child element contains an .ns2-column element.

Further reading on what I've used:

Toggle: http://api.jquery.com/toggle/

Has: http://api.jquery.com/has/

Upvotes: 0

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

Try this : You can use .filter() and check if element has ns2-column to return TRUE or FALSE. For TRUE, use closest('div.ns2-row') to find parent div and then hide it.

$('div.ns2-row-inner').filter(function(){
   return $(this).find('div.ns2-column').length==0;
}).closest('div.ns2-row').hide();

DEMO

Upvotes: 2

Related Questions