Notifikationer

Markér alle som læst Log ud

hoppe11 Nybegynder

19. marts 2008 - 11:06 Der er 14 kommentarer og
1 løsning

bytte rundt på elementers rækkefølge

hvordan er det muligt at bytte rundt på nogle elementers rækkefølge??

jeg vil f.eks. gerne have sektion 3 til at stå øverst og lade de resterende elementer rykke ned (3, 1, 2)

<div class="section">
sektion 1
<div>tekst</div>
</div>

<div class="section">
sektion 2
<div>tekst</div>
</div>

<div class="section">
sektion 3
<div>tekst</div>
</div>

Synes godt om

kalp Novice

19. marts 2008 - 11:25 #1

du skal lige finde noget andet end innerHTMl..
nodeValue eller hvad man skal bruge.

det her virker ellers.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<script>
function ReOrder(){
var elements = document.getElementsByTagName("div");
var firstElement;
var lastElement;
var firstFound = false;

for(var i = 0; i < elements.length; i++){
if(elements[i].className == "section" && !firstFound){
firstElement = elements[i];
firstFound = true;
}else if(elements[i].className == "section"){
lastElement = elements[i];
}
}
var tempElement = firstElement.innerHTML;
firstElement.innerHTML = lastElement.innerHTML;
lastElement.innerHTML = tempElement;
}
</script>
<BODY onload="ReOrder();">
<div class="section">
sektion 1
<div>tekst</div>
</div>

<div class="section">
sektion 2
<div>tekst</div>
</div>

<div class="section">
sektion 3
<div>tekst</div>
</div>
</BODY>
</HTML>

Synes godt om

kalp Novice

19. marts 2008 - 11:25 #2

ahh vent.. de skal rykke en ned..

Synes godt om

kalp Novice

19. marts 2008 - 11:34 #3

øh får rykket den en op med:D

for(var i = 0; i < elements.length; i++){
if(elements[i].className == "section" && !firstFound){
firstElement = elements[i];
firstFound = true;
}

if(elements[i].className == "section"){
lastElement = elements[i];
}
}

firstElement.insertBefore(lastElement);

men så meget roder jeg heller ikke med det.. så skal nok lige se efter.

Synes godt om

kalp Novice

19. marts 2008 - 11:47 #4

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<script>
function ReOrder(){
var elements = document.getElementsByTagName("div");
var firstElement;
var secondNode;
var lastElement;
var firstFound = false;

for(var i = 0; i < elements.length; i++){
if(elements[i].className == "section" && !firstFound){
firstElement = elements[i];
firstFound = true;
}

if(elements[i].className == "section"){
lastElement = elements[i];
}
}
var start = document.getElementById('Start');
var tempElement = firstElement;
firstElement.replaceNode(lastElement);
start.appendChild(tempElement);

}
</script>
<BODY onload="ReOrder();">
<div id="Start">
<div class="section">
sektion 1
<div>tekst</div>
</div>

<div class="section">
sektion 2
<div>tekst</div>
</div>

<div class="section">
sektion 3
<div>tekst</div>
</div>
</div>
</BODY>
</HTML>

Synes godt om

hoppe11 Nybegynder

19. marts 2008 - 12:09 #5

den skal ikke reverse rækkefølgen, men bare sætte et af dem over de andre..

eks.
3 øverst = 3, 1, 2
2 øverst = 2, 1, 3

:)

Synes godt om

hoppe11 Nybegynder

19. marts 2008 - 12:21 #6

<div id="sections">
<div id="track" class="section">
sektion track
<div>tekst</div>
</div>

<div id="label" class="section">
sektion label
<div>tekst</div>
</div>

<div id="genre" class="section">
sektion genre
<div>tekst</div>
</div>
</div>

- og man så i reorder funktionen angiver hvilket id som skal rykkes øverst

ReOrder('label');

Synes godt om

kalp Novice

19. marts 2008 - 12:36 #7

den sidste reverser ikke noget.. den tog det sidste element og lagde det op forrest.. som du forklarede, at du ønskede.

med hensyn til, at bestemme hvilken der skal øverste ud fra id så kan man da også det og dét burde du også have haft med i dit første indlæg;)

men ser på det når der er et lufthul i dag.

Synes godt om

hoppe11 Nybegynder

19. marts 2008 - 12:58 #8

ja, det var så min fejl :)

men tak for hjælpen indtil nu

Synes godt om

kalp Novice

19. marts 2008 - 14:02 #9

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<script>
function ReOrder(id){
var sections = document.getElementById('sections').cloneNode(true);
var elementToMove = document.getElementById(id).cloneNode(true);
var newSections = sections.cloneNode();
newSections.appendChild(elementToMove);
for(var i = 0; i < sections.children.length; i++){
if(sections.children[i].getAttributeNode("id").value != id){
newSections.appendChild(sections.children[i].cloneNode(true));
}
}
document.getElementById('sections').innerHTML = newSections.innerHTML;
}
</script>
<BODY onload="ReOrder('genre');">
<div id="sections">
<div id="track" class="section">
sektion track
<div>tekst</div>
</div>

<div id="label" class="section">
sektion label
<div>tekst</div>
</div>

<div id="genre" class="section">
sektion genre
<div>tekst</div>
</div>
</div>
</BODY>
</HTML>

Synes godt om

kalp Novice

19. marts 2008 - 14:03 #10

så er der lige det med innerHTMl.. men eh.. det kan selv bikse med hvis du vil have det uden innerHTMl:-)

Synes godt om

hoppe11 Nybegynder

19. marts 2008 - 15:32 #11

jeg kan få det til at virke i IE, men ikke Firefox :(

Synes godt om

kalp Novice

19. marts 2008 - 20:29 #12

nu virker det.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
</HEAD>
<script>
function ReOrder(id){
var sections = document.getElementById('sections');
var elementToMove = document.getElementById(id).cloneNode(true);
var newSections = sections.cloneNode(false);
newSections.appendChild(elementToMove);

for(var i = 0; i < sections.childNodes.length; i++)
{
try
{
if(sections.childNodes[i].getAttributeNode("id").value != id)
{
newSections.appendChild(sections.childNodes[i].cloneNode(true));
}
}
catch(err){}
}
document.getElementById('sections').innerHTML = newSections.innerHTML;
}
</script>
<BODY onload="ReOrder('genre');">
<div id="sections">
<div id="track" class="section">
sektion track
<div>tekst</div>
</div>

<div id="label" class="section">
sektion label
<div>tekst</div>
</div>

<div id="genre" class="section">
sektion genre
<div>tekst</div>
</div>
</div>
</BODY>
</HTML>

Synes godt om

olebole Juniormester

19. marts 2008 - 23:03 #13

<ole>

DOM ROCKS! ;D

<script type="text/JavaScript">
function foo(sId) {
var oElm = document.getElementById(sId),
oPar = oElm.parentNode;
oPar.insertBefore(oElm, oPar.firstChild);
}
</script>

<p>
<button onclick="foo('track')">Test track</button>
<button onclick="foo('label')">Test label</button>
<button onclick="foo('genre')">Test genre</button>
</p>

<div id="sections">
<div id="track" class="section">
sektion track
<div>tekst track</div>
</div>

<div id="label" class="section">
sektion label
<div>tekst label</div>
</div>

<div id="genre" class="section">
sektion genre
<div>tekst</div>
</div>
</div>

/mvh
</bole>

Synes godt om

hoppe11 Nybegynder

20. marts 2008 - 11:00 #14

tak for hjælpen begge to, men jeg håber det er ok hvis jeg giver kalp alle points, olebole? jeg har været lidt besværlg, så han har brugt mere tid end højest nødvendig :P

god påske

Synes godt om

olebole Juniormester

20. marts 2008 - 16:15 #15

Selvtak. Det er helt i orden med mig. God Påske ;o)

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript	4	27/04/202620:09	I går 22:36
Validering af filnavn i formular Af Strawberry i JavaScript	8	14/04/202610:11	20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript	2	03/02/202614:19	04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript	9	18/04/202516:52	22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript	2	14/02/202511:47	27/06/202514:34

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS