[JS] JQuery, regex en Internet Explorer

[YopY]

Hallo allen,

Waarschijnlijk een klein / snel vraagje. Ik heb een stukje Javascript die een CSS class 'empty' toe moet voegen aan een div als een daarbij horende div 'leeg' is. Deze werkt goed onder Firefox en dergelijke (natuurlijk), echter onder IE (alle versies) werkt deze niet goed. Zit er een verschil tussen de regex of iets dergelijks van IE en De Andere Browsers? Een Google zoektocht levert weinig op - daar de meesten aannemen dat je div helemaal leeg is (dwz geen innerHtml), echter die van mij heeft wel inhoud in de vorm van een legend (en ja, deze moet er wel inblijven).

Ik ben helaas niet echt thuis in regex, dus nakijken of deze klopt lukt me niet zo goed. Maar aangezien dit goed in de alternatieve browsers werkt, lijkt het alsof dit een IE issue is.

JavaScript:

function detectEmptyTabContent() {
    $(tabElement).find('.tabs-content>ul>li>fieldset').each(function(){
        // get tab content without legend
        var tabContent = $(this).html().replace(/<legend>.+<\/legend>/, '');
        // when it contains nothing...
        if (tabContent.match(/^\s*$/)) {
            // get tab index
            var position = ($(this).parent().attr('class')).split(' ')[0].replace('tab-content-','');
            // add class=empty on navigation and content
            $(tabElement).find('.tabs-navigation>ul>li').eq(position-1).addClass('empty');
            $(tabElement).find('.tabs-content>ul>li').eq(position-1).addClass('empty');
        }
    });
}

De foutopsporingsfunctie van IE geeft geen problemen weer, en ook compatibiliteitsweergave helpt niets (in IE . De 'empty' class wordt simpelweg niet toegevoegd aan de tabs. Hieronder nog de HTML die doorzocht wordt:

HTML:

<div class="tabs-navigation">
    <ul>
        <li class="tab-1 current">
            <a href="#tab:tab-1" rel="tab-1" onclick="return false;">
                Mijn tab 1
            </a>
        </li>

        <li class="tab-2">
            <a href="#tab:tab-2" rel="tab-2" onclick="return false;">
                Mijn tab 2
            </a>
        </li>
        
        <li class="tab-3">
            <a href="#tab:tab-3" rel="tab-3" onclick="return false;">
                Mijn tab 3
            </a>
        </li>
        
        <li class="tab-4">
            <a href="#tab:tab-4" rel="tab-4" onclick="return false;">
                Mijn tab 4
            </a>
        </li>
    </ul>
</div>

<div class="tabs-content">
    <ul>
        <li class="tab-content-1">
            <fieldset>
                <legend>Mijn tab 1</legend>
                <div>hoi deze heeft inhoud</div>
            </fieldset>
        </li>
        <li class="tab-content-2">
            <fieldset>
                    <legend>Mijn tab 2</legend>
                    <div>Hoi ook deze heeft inhoud</div>
            </fieldset>
        </li>
        <li class="tab-content-3">
            <fieldset>
                    <legend>Mijn tab 3 zonder inhoud</legend>
            </fieldset>
        </li>
        <li class="tab-content-4">
            <fieldset>
                <legend>Mijn tab 4 zonder inhoud</legend>
            </fieldset>
        </li>
    </ul>
</div>

Zijn er IE / Javascript / Regex goeroes die hier hun licht op kunnen werken?

[Bosmonster]

Wat doe je uberhaupt met die regex en waarom gebruik je niet gewoon jQuery functies als empty() of remove() ?

Edit: ow je verwijdert niks, je bent aan het controleren of die leeg is.. waarom kijk je dan niet naar de inhoud van de elementen ipv naar de html met regex?

Regex heb je eigenlijk nooit nodig bij jQuery in dit soort gevallen, daar heb je juist de uitgebreide queryselector engine voor..

Die heel bak code die je daar geproduceerd hebt is waarschijnlijk gewoon te vervangen met zoiets (ongetest):

JavaScript:

$('.tabs-navigation fieldset').each(function(){
   if ($(this).find('*:not(legend)').length > 0)
       $(this).parent().addClass('empty');
});

[ Voor 86% gewijzigd door Bosmonster op 14-12-2009 10:10 ]

[Verwijderd]

Ik heb hier een oplossing voor je in Mootools die ik eerder had geschreven. Het lijkt op elkaar dus je hoeft alleen een paar functies aan te passen naar de jQeury functionaliteiten:

JavaScript:

$each($$('.tabs-navigation ul li a'),function(a) {
    // Stop de browser default aktie (i.p.v. onclick met return false)
    a.addEvent('click',function(e) {
        e.stop();
    });
    // Kloon DOM element aanmaken
    var cloneElm = $(a.get('rel')).clone().getChildren('fieldset')[0];

    // Verwijder de legend in de kloon
    cloneElm.getChildren('legend').dispose();

    // Trim witruimtes en tab ruimtes en check of die leeg is
    if(cloneElm.get('html').clean() == "") {
        $(a.get('rel')).addClass('empty');
    }
});

HTML:

    <div class="tabs-navigation">
        <ul>
            <li class="tab-1 current">
                <a href="#tab-1" rel="tab-1">Mijn tab 1</a>
            </li>
            <li class="tab-2">
                <a href="#tab-2" rel="tab-2">Mijn tab 2</a>
            </li>
            
            <li class="tab-3">
                <a href="#tab-3" rel="tab-3">Mijn tab 3</a>
            </li>
            
            <li class="tab-4">
                <a href="#tab-4" rel="tab-4">Mijn tab 4</a>
            </li>
        </ul>
    </div>

    <div class="tabs-content">
        <ul>
            <li id="tab-1">
                <fieldset>
                    <legend>Mijn tab 1</legend>
                    <div>hoi deze heeft inhoud</div>
                </fieldset>
            </li>
            <li id="tab-2">
                <fieldset>
                        <legend>Mijn tab 2</legend>
                        <div>Hoi ook deze heeft inhoud</div>
                </fieldset>
            </li>
            <li id="tab-3">
                <fieldset>
                        <legend>Mijn tab 3 zonder inhoud</legend>
                </fieldset>
            </li>
            <li id="tab-4">
                <fieldset>
                    <legend>Mijn tab 4 zonder inhoud</legend>
                </fieldset>
            </li>
        </ul>
    </div>

Succes!

[ Voor 22% gewijzigd door Verwijderd op 14-12-2009 15:49 . Reden: overbodige dingetjes aangepast + uitleg JS ]