[Prototype] Detecteren of dat een element een child is van

[-DarkShadow-]

Ik heb een menu met de volgende opbouw:

HTML:

<ul id="menu">
    <li class="level0"><a><span>item 1</span></a></li>
    <li class="level0 parent"><a><span>item 2</span></a>
        <ul class="level0">
            <li class="level1"><a><span>child item</span></a></li>
        </ul>
    </li>
</ul>

Als er wordt geklikt op een item moet ik dit detecteren en op het moment dat dit element een parent is (aangegeven met class="parent"), moet ik actie ondernemen.

JavaScript:

var menu = Class.create({
    
    initialize: function(){
        $$("#menu li").invoke('observe', 'click', this.linkClick.bind(this));
    },

    linkClick: function(e){
        var menuElement = e.element();
        // Pseudo code:
        if(Element has class Parent){
            Do Something();
        }
})

document.observe('dom:loaded', function() {
    new menu();
})

menuElement is soms een span, soms een a. Het gemakkelijkste zou zijn om de CSS selector ($$) zo in te stellen zodat deze alleen triggert op het moment dat er op een parent wordt geklikt. Hiervoor heb ik "#nav li.parent a" geprobeert, maar deze triggert ook op alle sub menu items. Performance is belangrijk.

[Styxxy]

Zetje in de goede richting (zelf aanpassen naar jouw situatie):

JavaScript:

document.getElementById("someElementId").classList.contains("myClass")

[-DarkShadow-]

classList werkt in te weinig browsers helaas.

Het enige wat ik tot nu toe heb bedacht is om alle ancestors op te vragen en hier doorheen te stappen todat een li.parent is gevonden of tot dat li.parent is uitgesloten doordat bijv. #menu wordt gevonden. Maar dit lijkt me nogal traag.

[ Voor 72% gewijzigd door -DarkShadow- op 07-09-2011 22:38 ]

[Styxxy]

Fallback kan je makkelijk maken. Mozilla heeft daar functies voor geschreven, die je hier kan downloaden. ik zou die aan het Element type toevoegen indien die niet bestaan.

(Bron: http://hacks.mozilla.org/2010/01/classlist-in-firefox-3-6/)

Alle browsers behalve IE ondersteunen deze methode trouwens .

[ Voor 30% gewijzigd door Styxxy op 07-09-2011 22:46 . Reden: bron toegevoegd ]

[-DarkShadow-]

De className van menuElement (het element waar op geklikt werd) is leeg, dus vziw heb ik niks aan classList of de Protoype equivalenten hasClassName, toggleClassName, etc...

[Bosmonster]

Nu heb ik weinig kennis van Prototype, maar ik kan me niet voorstellen dat er niet gewoon een parent() method iets is.

jQuery

JavaScript:

$(this).parent().hasClass('parent');

Hiervoor heb ik "#nav li.parent a" geprobeert, maar deze triggert ook op alle sub menu items.

Gebruik eens > ipv een spatie in je selector..

[ Voor 30% gewijzigd door Bosmonster op 07-09-2011 22:50 ]

[-DarkShadow-]

Bosmonster schreef op woensdag 07 september 2011 @ 22:48:
Nu heb ik weinig kennis van Prototype, maar ik kan me niet voorstellen dat er niet gewoon een parent() method iets is.

Gevonden! (Ik ben ook niet ervaren met Prototype). element.up("CSS selector").

[...]
Gebruik eens > ipv een spatie in je selector..

Tnx, dat werkt.

JavaScript:

initialize: function(){
        $$("#nav li.parent>a").invoke('observe', 'click', this.linkClick.bind(this));
    },

[R4gnax]

-DarkShadow- schreef op woensdag 07 september 2011 @ 22:32:
Het enige wat ik tot nu toe heb bedacht is om alle ancestors op te vragen en hier doorheen te stappen todat een li.parent is gevonden of tot dat li.parent is uitgesloten doordat bijv. #menu wordt gevonden. Maar dit lijkt me nogal traag.

Toch is dat precies hoe bijv. de 'closest' operator zou werken in jQuery. Sommige dingen kunnen nou eenmaal niet sneller gedaan worden.