[jQuery] Foolproof tekst tussen twee koppen selecteren

Pagina: 1
Acties:

Onderwerpen


Acties:
  • 0 Henk 'm!

  • TerraGuy
  • Registratie: Februari 2001
  • Laatst online: 17-06-2023

TerraGuy

The weirdo with the beard

Topicstarter
Voor een site wil ik foolproof, user-friendly inklaplijstjes maken waar degene die de teksten inklopt (in Joomla) zo min mogelijk hoeft te doen. De setting:

HTML:
1
2
3
4
5
6
7
8
<h4>Kop 1</h4>
Tekst met allerlei opmaak.
<h4>Kop 2</h4>
Tekst met allerlei opmaak
<h4>Kop 3</h4>
Tekst met allerlei opmaak

etc.

Ik zoek een methode om de tekst tussen de kopjes te selecteren, in een wrapper te stoppen, zodat die ingeklapt kan worden. Dus tussen een ongebruikte tag stoppen, bijv. h6.

Nu dacht ik:
JavaScript:
1
2
jQuery('h4').before('</h6>');
jQuery('h4').after('<h6>');

Maar dat schijnt niet te mogen, en dat werkt dus ook niet. Met .wrap('</h6><h6>') dacht ik dan te gaan werken, maar de tags moeten dus omgedraaid worden (eerst de sluit-tag, dan de open-tag) en dat draait hij weer terug.(of sluit ze automatisch).

Heeft iemand een idee hoe ik de tekst geselecteerd kan krijgen? Liefst zonder handelingen die de gebruiker moet uitvoeren, alles automatisch. :)

Iedereen kan gelijk hebben, allemaal tegelijk. Dat heb je met quantum.


Acties:
  • 0 Henk 'm!

  • kaesve
  • Registratie: Maart 2009
  • Laatst online: 16-05 03:04
JavaScript:
1
2
var text = $('selector').untilNext('selector')
$('<div/>').append(text).appendTo('selector')


Zoiets?

Acties:
  • 0 Henk 'm!

  • Bosmonster
  • Registratie: Juni 2001
  • Laatst online: 10-09 08:45

Bosmonster

*zucht*

Die tekst hoort sowieso niet los in je html te staan, maar in paragraphs.

edit: of bedoel je dat ook met "opmaak"?

Verder, je wilt geen tekst in een h6 stoppen "omdat die niet gebruikt wordt". Headers zijn daar niet voor bedoeld.

[ Voor 56% gewijzigd door Bosmonster op 04-03-2012 11:14 ]


Acties:
  • 0 Henk 'm!

  • TerraGuy
  • Registratie: Februari 2001
  • Laatst online: 17-06-2023

TerraGuy

The weirdo with the beard

Topicstarter
kaesve schreef op zondag 04 maart 2012 @ 03:44:
JavaScript:
1
2
var text = $('selector').untilNext('selector')
$('<div/>').append(text).appendTo('selector')


Zoiets?
Was ff puzzelen, aangezien untilNext() eigenlijk nextUntil() blijkt te heten :P Maar je bracht me wel op het goede spoor, waarvoor mijn dank. :Y

Uiteindelijk is dit mijn code geworden om het voor elkaar te krijgen:
JavaScript:
1
2
3
jQuery('h4').each(function() {
        jQuery(this).nextUntil('h4').wrapAll('<div class="collapse"></div>')
;});
Bosmonster schreef op zondag 04 maart 2012 @ 11:13:
Die tekst hoort sowieso niet los in je html te staan, maar in paragraphs.

edit: of bedoel je dat ook met "opmaak"?

Verder, je wilt geen tekst in een h6 stoppen "omdat die niet gebruikt wordt". Headers zijn daar niet voor bedoeld.
De tekst staat inderdaad tussen tags. Ik had het wat versimpeld neergezet, aangezien er allerlei opmaak gebruikt moet kunnen gaan worden waar ik verder geen invloed op heb (wil hebben). :)
En blijkbaar heb ik het iets teveel versimpeld, want tussen h6-tags is inderdaad geen goed idee, dank u voor de terechtwijzing. :P Een div met een class it is; ik zat waarschijnlijk te diep te wroeten in 'hoe krijg ik dit nu voor elkaar' om te zien dat de h6-tag een slecht idee is. ;)

Iedereen kan gelijk hebben, allemaal tegelijk. Dat heb je met quantum.


Acties:
  • 0 Henk 'm!

  • kaesve
  • Registratie: Maart 2009
  • Laatst online: 16-05 03:04
Ha, ik had er een disclaimer bij moeten zetten; vanaf mijn mobiel getyped, vanuit bed en met 1 oog al dicht - dat kan haast niet foutloos zijn :p

Maar goed om te horen dat je het hebt weten op te lossen :)