Autor Zpráva
hunter_dave
Profil
Zdravím,

nejspíš to bude primitivní problém, ale hledám už docela dlouho jak tady na diskuzi tak na internetu a nějak to nemůžu najít.
Jde o prohození dvou prvků konkrétně divů pomocí js. Potřebuji to prohodit přímo v kódu.
Z tohohle:
<div id="divy">
    <div id="prvni"></div>
    <div id="druhy"></div>
</div>
Potřebuji tohle:
<div id="divy">
    <div id="druhy"></div>
    <div id="prvni"></div>
</div>

Jde v podstatě o to, že potom potřebuji získat ty divy v nějakém určitém pořadí pomocí fce getElementsByTagName()
var divy = document.getElementById("divy").getElementsByTagName("div");
//vysledek po přehození by měl vypadat takto:
divy[0].id //by mělo odpovídat "druhy"
divy[1].id //by mělo odpovídat "prvni"

Už si vážně nevím rady, budu rád za každý návrh, díky. :)
Tori
Profil
A nemůžete je dohledat podle ID prvy/druhy a podle toho si je uložit do pole divy?
hunter_dave
Profil
Těch divů tam bude víc takže bohužel ne ..
Kokossak
Profil *
Chvíli jsem hledal a našel jsem něco takového.

Jak psal původní autor, není to funkční řešení, je to jen pouhé nastínění, jak by to mohlo fungovat.
Co takhle nejprve načíst obsah do nějakého řetězce a pak ho jen pomocí funkce nechali vypsat, popřípadě prohodili?
Zde již zmiňované nastínění:

2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html>
<head>
....
<script>
var div_levy="něco vlevo";
var div_pravy="něco vpravo";
function vypln() 
{ document.getElementById("levo").innerHTML= div_levy;
  document.getElementById("pravo").innerHTML= div_pravy;
}
</script >
</head>
<body onLoad="vypln()">
<div id="levo"></div><div id="pravo"></div>
</body>

Snad pomůže.


Omlouvám se za špatně vložený kód. Prosím o editaci, děkuji
hunter_dave
Profil
Bohužel spolu s divy potřebuji přenášet také i jejich atributy a události.. snažím se pomocí myši přehazovat v seznamu dva divy .. ten který přesouvám a ten na který ho přesunu. Aby se to dalo vrátit potřebuju zachovat jejich ID, události onmouseup, onmousedown apod..

Doufal jsem v jednoduché řešení, třeba že by divy měli v kódu nějaké pořadové číslo které by se dalo změnit.
Kokossak
Profil *
Mělo by se to dát změnit, jak říkáš pomocí JS. Teď na to nemám čas, ale tak zítra okolo 12 bych ti to tu hodil. Snad na něco přijdu. Určitě to nějak zvládneme.
hunter_dave
Profil
Díky moc :) taky to ještě nějak zkusím, ale moc velký naděje si nedělám, už mě to trápí delší dobu.
hunter_dave
Profil
Tak nakonec teda vyřešeno. Nejspíš existuje jednoduší způsob, ale tenhle je taky funkční. Šlape to ve všech prohlížečích.

Vytvořil jsem si pomocné pole newDivs pomocí cyklu for jsem do toho pole zapsal nové pořadí divů, následně odstranil všechny divy "removeChild()" a zase nasadil zpátky v novém pořadí "appendChild"

for(var i = 0; i < divs.length; i++) // cyklem projdeme všechny staré divy
    if(document.getElementById(divs[i].id)) // podmínka ošetří DOM exeption
    document.getElementById("items").removeChild(document.getElementById(divs[i].id)); // odstraníme všechny staré divy
                        
for(var i = 0; i < newDivs.length; i++) // cyklem projdeme všechny nové divy
    document.getElementById("items").appendChild(newDivs[i]); // nasadíme nové divy v jiném pořadí zpátky do kódu
Chamurappi
Profil
Reaguji na huntera_dave:
Nějak nerozumím tomu, proč bereš element, vytahuješ si z něj jeho id a pak podle toho id opět zkoušíš hledat ten element… není to trochu divné? Pokud má něco unikátní id, tak ti document.getElementById(něco.id) vrátí vždy něco, ne?

Pokud nemáš nějaký předpis pro výsledné pořadí, tak předpokládám, že ani není nutné, aby tvé elementy měly ídéčka.

snažím se pomocí myši přehazovat v seznamu dva divy .. ten který přesouvám a ten na který ho přesunu
Máš-li elementy A a B ve společném rodiči C:
1) Uložíš si A.nextSibling do proměnné X.
2) Přesuneš A před B pomocí C.insertBefore(A, B).
3) Přesuneš B před X pomocí C.insertBefore(B, X).
A je hotovo, ne? Žádná velká věda.
hunter_dave
Profil
Chamurappi:
Z nějakého důvodu se ten cyklus s removeChild nedokončil správně .. a ještě divnější je, že když to odstraňuju pomocí toho id tak to funguje .. každopádně to insertBefore je přesně to co jsem potřeboval, věděl jsem že řešení je jednoduché :) díky moc

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: