JavaScript движущийся элемент в DOM
Как быстрый взлом Вы могли заменить пространство плюс символ перед base64-декодированием.
5 ответов
Тривиально с jQuery
$('#div1').insertAfter('#div3');
$('#div3').insertBefore('#div2');
Если вы хотите делать это неоднократно, вам нужно будет использовать разные селекторы, так как блоки div сохранят свои идентификаторы при перемещении.
$(function() {
setInterval( function() {
$('div:first').insertAfter($('div').eq(2));
$('div').eq(1).insertBefore('div:first');
}, 3000 );
});
jQuery.fn.swap = function(b){
b = jQuery(b)[0];
var a = this[0];
var t = a.parentNode.insertBefore(document.createTextNode(''), a);
b.parentNode.insertBefore(a, b);
t.parentNode.insertBefore(b, t);
t.parentNode.removeChild(t);
return this;
};
и используйте его так:
$('#div1').swap('#div2');
если вы не хотите использовать jQuery, вы можете легко адаптировать эту функцию.
Нет необходимости использовать библиотеку для такой тривиальной задачи:
var divs = document.getElementsByTagName("div"); // order: first, second, third
divs[2].parentNode.insertBefore(divs[2], divs[0]); // order: third, first, second
divs[2].parentNode.insertBefore(divs[2], divs[1]); // order: third, second, first
При этом учитывается тот факт, что getElementsByTagName возвращает текущий NodeList, который автоматически обновляется для отражения порядок элементов в DOM по мере их манипулирования.
Вы также можете использовать:
var divs = document.getElementsByTagName("div"); // order: first, second, third
divs[0].parentNode.appendChild(divs[0]); // order: second, third, first
divs[1].parentNode.insertBefore(divs[0], divs[1]); // order: third, second, first
и есть различные другие возможные перестановки, если вам хочется поэкспериментировать:
divs[0].parentNode.appendChild(divs[0].parentNode.replaceChild(divs[2], divs[0]));
например: -)
var swap = function () {
var divs = document.getElementsByTagName('div');
var div1 = divs[0];
var div2 = divs[1];
var div3 = divs[2];
div3.parentNode.insertBefore(div1, div3);
div1.parentNode.insertBefore(div3, div2);
};
Эта функция может показаться странной, но для правильного функционирования она сильно зависит от стандартов. На самом деле, может показаться, что он работает лучше, чем версия jQuery, опубликованная tvanfosson , которая, кажется, выполняет подкачку только дважды.
На какие особенности стандартов он полагается?
insertBefore Вставляет узел newChild перед существующим дочерним узлом refChild. Если refChild имеет значение null, вставьте newChild в конец списка детей. Если newChild является объектом DocumentFragment, все его дочерние элементы являются вставлены в том же порядке перед refChild. Если newChild уже в дереве он сначала удаляется.
Подход Jquery, упомянутый вверху, будет работать. Вы также можете использовать JQuery и CSS. Скажите, например, в Div one вы применили class1 и div2, вы применили класс class2 (скажем, например, каждый класс css предоставляет определенную позицию в браузере), теперь вы можете поменять классы, используя jquery или javascript (который изменит позицию)