[JS] Przenoszenie diva wewnątrz innego diva

0

Mam sobie

a wewnątrz niego kilka
gdzie x to jakiś identyfikator. I sobie użytkownik robi pewną akcję, a ja potrzebuję teraz zmienić kolejność tych divów, by wybrany przeze mnie (którego znam ten identyfikator x) znalazł się na samej górze.</p>

Jak to zrobić, najprościej, może się da bez usuwania i tworzenia na nowo?

Skonstruowałem takie coś, ale działa niepoprawnie po paru kliknięciach już (too much recursion):

var elem = $('image-' + ident); // gdzie ident to pewien identyfikator
														
var newelem = document.createElement('div');
newelem.innerHTML = elem.innerHTML;
														
$('images').removeChild(elem);
$('images').insertBefore(newelem, $('images').firstChild);

Używam prototype + scriptaculeus, jak ktoś ma pomysł jak temu dodać fajny efekt to też będę dźwięczny ;-)

[added]
Nav podpowiedział rozwiązanie - removeChild usuwa element z drzewa DOM, ale nie oznacza to, że nie można usuniętego elementu wstawić na nowo.

$('images').removeChild(elem);							
$('images').insertBefore(elem, $('images').firstChild);

i gra.

0

a mógłbyś coś więcej powiedzieć o tym sposobie odwoływania się do elementów? :) Wydaje się dużo bardziej wygodny, niż przez document.getElementById...

edit - i o co chodzi z tym błędem rekursji (rekurencji?)

0 
function $(id)
{
    return document.getElementById(id);
}

(prototype chyba coś takiego udostępnia, za to jQuery na 100% - i to dużo więcej w ten sposób)

0

Ja mam wersję 2.0 ;p

function $(id)
{
    if( typeof(id) == 'object' )
        return id;
    else
        return document.getElementById(id);
}
0

W takim razie popatrz na jQuery i to będzie wersja 3.0 gdzieś ;-)

A czym jest "Too much recursion" niestety nie wiem i nie rozumiem gdzie w moim kodzie była jakakolwiek rekursja, niemniej jednak dodanie nowego efektu (new Effect.SlideDown()) powinno być dopiero po ponownym wstawieniu do drzewa DOM, a nie przed usunięciem i wstawieniem.

0

Nie rozumiem po co to createElement i removeChild, jeśli poda sie istniejący element to insertBefore go po prostu przenosi:

<script>
function moveUp(t) {
  t.parentNode.insertBefore(t, t.parentNode.firstChild);
}
</script>

<div>
  <div onclick="moveUp(this)">image 1</div>
  <div onclick="moveUp(this)">image 2</div>
  <div onclick="moveUp(this)">image 3</div>
</div>

1 użytkowników online, w tym zalogowanych: 0, gości: 1