[jQuery] Lijst zoeken die na een bepaalde tekst staat

[SpaceK33z]

Ik ben bezig met een WordPress blog en wil daarvoor een simpel effectje creëren, waarmee een lijst (<ul>) kan uitklappen als er op de titel van de lijst erboven wordt geklikt.
Nou wil ik echter die lijst niet steeds een class mee hoeven te geven, want dat is in WordPress nogal irritant en ik werk ook samen met mensen die helemaal niks van html snappen.

Uiteraard heb ik al gezocht en ook gevonden, alleen niet helemaal het juiste. Met 'after' is het mogelijk om NA een bepaalde tag (wat dus <strong> zou moeten zijn) een lijst of wat dan ook in te voegen. Ik wil echter niks nieuws invoegen, maar alleen die lijst te 'pakken' krijgen.

Met 'contains' krijg ik al de gewenste <strong>:

JavaScript:

$("strong:contains('Default applications')").click(function () {
            $("*deze zou dan de eerstvolgende lijst NA de <strong> moeten pakken*").slideToggle("slow");
});

De code ziet er zo uit, onthoud wel dat er nog meerdere lijsten staan in de pagina.

HTML:

<strong>Default applications</strong>
<ul>
    <li>Google Apps</li>
    <li>Titanium Backup</li>
    <li>Spare Parts</li>
    <li>DeFroST Setup</li>
    <li>DSPManager</li>
</ul>

Hoe krijg ik via jQuery de eerstvolgende lijst na die <strong> tag te 'pakken'?

[X-Lars]

Het is wel erg bad practice om op text content elementen te selecteren. Mensen snappen misschien geen HTML, maar wijzigen wel content... Ik zou hier echt een oplossing voor zoeken (bijv. met een container div incl. class om dat stuk content).

Wat je nu zoekt is "next sibling":
http://api.jquery.com/next/ (of evt. http://api.jquery.com/next-siblings-selector/)

Edit: dit gaat dus ook al mis als strong en ul niet direct na elkaar staan in de markup. Classes!

Edit 2: leuk dat jQuery, er zit ook een "closest" selector in (http://api.jquery.com/closest/)

[ Voor 21% gewijzigd door X-Lars op 10-10-2010 10:28 ]

[Bosmonster]

closest wordt voornamelijk intern gebruikt in de selector engine (en wordt intensief gebruikt voor event delegation), maar is inderdaad ook via de api beschikbaar

Leuk stukje over de optimalisaties overigens:
http://ejohn.org/blog/closestarray-in-jquery-14/

Je vroeg er niet om, maar je smiley leek me wat onbegrijpend

[ Voor 50% gewijzigd door Bosmonster op 10-10-2010 11:28 ]

[SpaceK33z]

X-Lars schreef op zondag 10 oktober 2010 @ 10:23:
Het is wel erg bad practice om op text content elementen te selecteren. Mensen snappen misschien geen HTML, maar wijzigen wel content... Ik zou hier echt een oplossing voor zoeken (bijv. met een container div incl. class om dat stuk content).

Wat je nu zoekt is "next sibling":
http://api.jquery.com/next/ (of evt. http://api.jquery.com/next-siblings-selector/)

Edit: dit gaat dus ook al mis als strong en ul niet direct na elkaar staan in de markup. Classes!

Edit 2: leuk dat jQuery, er zit ook een "closest" selector in (http://api.jquery.com/closest/)

Dankje . Nou loop ik alleen nog vast, ik weet niet of ik closest() of next() kan gebruiken in combinatie met 'contains' voor die <strong>. Er zit niet echt een andere oplossing op, het is juist de bedoeling dat die <strong> exact die naam heeft dus dat maakt niet veel uit.

Ik heb nou bijvoorbeeld dit, maar dat wil niet echt werken.

JavaScript:

$("strong:contains('Default applications')").click(function () {
    $("strong:contains('Default applications')").closest('ul').slideToggle("slow");
    $("strong:contains('Default applications')").toggleClass("activelist");     
});

[X-Lars]

Binnen je click function is er een andere scope. Probeer dit eens:

code:

this.closest('ul').slideToggle("slow");

Edit: hopelijk werkt dat niet in jQuery, maar het zal wel iets zijn als $(this) i.p.v. this ofzo.

[ Voor 29% gewijzigd door X-Lars op 10-10-2010 11:31 ]

[Bosmonster]

Als je de API leest zie je dat je closest hier niet kan gebruiken. Next is hier je vriend. (ongeacht over hoe inefficient het is om op content te zoeken..)

Daarnaast doe je dezelfde selector nu 3x. Daar kun je gewoon $(this) gebruiken natuurlijk binnen de event-functie.

@X-Lars: idd, this verwijst naar het DOM-object. jQuery werkt unobtrusive in tegenstelling tot bijvoorbeeld Mootools en Prototype en verandert de DOM elementen niet. Via $(this) krijg je de jQuery functionaliteit van dat element tot je beschikking.

[ Voor 33% gewijzigd door Bosmonster op 10-10-2010 11:45 ]

[SpaceK33z]

Ik snap er helemaal niks meer van. Ik geef jullie even de link: http://keeskluskens.nl/romfinder/12/defrost/
Hier heb ik deze Javascript in staan:

JavaScript:

    $(document).ready(function() {
        $("strong:contains('Default applications')").click(function () {
            $(this).closest('ul').slideToggle("slow");
            $(this).toggleClass("activelist");
        });
        
        $("strong:contains('Default applications')").next("ul").css("display","none");

        var cssObj = {
        'background' : 'url(http://keeskluskens.nl/romfinder/wp-content/themes/romfinder/images/add.png) no-repeat left center',
        'padding-left' : '25px'
        }
        $("strong:contains('Default applications')").css(cssObj);
        
    });

X-Lars schreef op zondag 10 oktober 2010 @ 11:30:
Binnen je click function is er een andere scope. Probeer dit eens:

code:

this.closest('ul').slideToggle("slow");

Edit: hopelijk werkt dat niet in jQuery, maar het zal wel iets zijn als $(this) i.p.v. this ofzo.

Vreemd genoeg werkt dit niet, net zoals de Next siblings selector en .next().

[ Voor 21% gewijzigd door SpaceK33z op 10-10-2010 12:03 ]

[X-Lars]

Bosmonster schreef op zondag 10 oktober 2010 @ 11:23:
Je vroeg er niet om, maar je smiley leek me wat onbegrijpend

Die smiley was er, omdat "closest" me niet echt betrouwbaar leek (stel ik heb een <div/><div/><div/> en ik doe closest() van de middelste, welke krijg ik dan terug?). Maar ik lees nu dat-ie alleen ancestors traversed, en dan vind ik de naam van de method weer niet goed.

Bosmonster schreef op zondag 10 oktober 2010 @ 11:33:
@X-Lars: idd, this verwijst naar het DOM-object. jQuery werkt unobtrusive in tegenstelling tot bijvoorbeeld Mootools en Prototype en verandert de DOM elementen niet. Via $(this) krijg je de jQuery functionaliteit van dat element tot je beschikking.

Daarom zei ik ook "hopelijk werkt dat niet". Had afgelopen week nog zo'n aanvaring met Prototype, snap niet dat ze daar nog niet vanaf gestapt zijn.

Sorry TS, beetje off-topic. Voor jou is ook console.dir() je friend

[SpaceK33z]

X-Lars schreef op zondag 10 oktober 2010 @ 12:03:
...
Sorry TS, beetje off-topic. Voor jou is ook console.dir() je friend

Ik heb geen fouten in de Console gevonden (in Chrome dan).

Edit:
Ik geef het op, dan zet ik maar een extra class in de lijst. Toch bedankt, X-Lars en Bosmonster .

[ Voor 17% gewijzigd door SpaceK33z op 10-10-2010 12:18 ]

[X-Lars]

Bosmonster schreef op zondag 10 oktober 2010 @ 11:33:
Als je de API leest zie je dat je closest hier niet kan gebruiken. Next is hier je vriend. (ongeacht over hoe inefficient het is om op content te zoeken..)