Question

Hi hope someone can help out with this one:

What I basically want is that when div introtext is empty it has to hide the div and change the parent div (grid-6) to class=grid-12. I can’t seem to get this job done! Here’s what I have (samplecode):

HTML

<div class=header>
    <img src="[[DTIMAGE]]" alt="inuit.css logo">
</div>
<h1 style="font-size:10px;">[[TITLE]]</h1>
<div class=grids>
    <div class=grid-12>
        [[FULLTEXT]]
    </div><!-- /grid-6 -->
</div><!-- /grids -->
<hr>
<div class=grids>
    <div class=grid-6>
        [[FULLTEXT]]
    </div><!-- /grid-6 -->
    <div class=grid-6>
        <div class="introtext"></div>
    </div><!-- /grid-6 -->
</div><!-- /grids -->
<hr>
<div class=footer>
    [[FOOTER]]
</div>

Script [using jQuery 1.7.2]

$(document).ready(function(){
    if ($(".introtext").text() === ""){
        $(".introtext").hide();
    }
});

Thanks in advance

Answer 1

If I understand correctly, then I’d suggest:

$('.introtext').each(
    function() {
        if (!$(this).text()) {
            $(this).hide().parent().toggleClass('grid-6 grid-12');
        }
    });​

JS Fiddle demo.

The above code reworked to account for changes to the requirements, as noted in the comment from the OP:

I’m totally wrong (too much digging to get this to work) The fact is that if div introtext is empty the div grid-6 (where the [[FULLTEXT]] is in ) should change to div=grid-12

$('.introtext').each(
    function() {
        if (!$(this).text()) {
            $(this).hide().parent().prev().toggleClass('grid-6 grid-12');
        }
    });​

JS Fiddle demo.

Reprised the above:

$('.grid-6').filter(
    function(){
        var introtextEl = $(this).next('.grid-6').find('.introtext');
        return introtextEl.length && !introtextEl.text()
    }).toggleClass('grid-6 grid-12');

JS Fiddle demo.

The above code (the latest code block), effectively looks at all the elements returned by the selector, and filters them based on two conditions, first: if there is a following element of class grid-6 with a child element of class introtext (jQuery selectors always return an array, hence the .length check), and second: if that found .introtext element has no text-content.

If these conditions are both true then the currently-assessed element (and all elements for which the conditions are true) are returned to be acted upon by the toggleClass() method.

References:

• each().
• filter().
• find().
• hide().
• next().
• parent().
• prev().
• text().
• toggleClass().