20.05.2015, 14:23
|
|
Новичок на форуме
|
|
Регистрация: 26.04.2013
Сообщений: 4
|
|
|
Изменить расположение в списке
Например есть список из десяти (li), как сделать так, чтобы при нажатии кнопки, первый и третий поменялись местами на JS
|
|
20.05.2015, 14:48
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
На jQuery можно так:
$('button').click(function() {
var li = $('ul li');
li.eq(1).after(li.eq(0)).before(li.eq(2));
})
Последний раз редактировалось laimas, 20.05.2015 в 14:51.
|
|
20.05.2015, 14:55
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,112
|
|
|
|
|
21.05.2015, 21:30
|
|
Профессор
|
|
Регистрация: 23.10.2010
Сообщений: 2,718
|
|
|
Делается swop через доп-элемент. То есть эл2 идет в темп, эл2 меняется на эл1, а эл1 меняется на темп. Стандартная процедура.
|
|
21.05.2015, 22:34
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,112
|
|
|
kostyanet,
не могли бы вы привести код соотвествующий вашему описанию
|
|
21.05.2015, 23:47
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,112
|
|
|
Сообщение от Sweeft
|
|
первый и третий поменялись местами на JS
|
<ul id="act">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<script type="text/javascript">
var ul = document.getElementById('act');
function run(parent, max, min) {
parent.insertBefore(parent.children[min], parent.children[max]);
parent.insertBefore(parent.children[max], parent.children[min])
};
run(ul, 2, 0); //max > min
</script>
|
|
22.05.2015, 09:55
|
|
Профессор
|
|
Регистрация: 23.10.2010
Сообщений: 2,718
|
|
А, точно, там нет элемента временного хранения в явном виде, неявно им является родитель. Функция такая
var swap_nodes=function(node1,node2) {
if(!node1 || !node2)
return;
file_list.replaceChild(node1,node2);
file_list.insertBefore(node2,node1);
};
|
|
22.05.2015, 11:25
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,112
|
|
|
Сообщение от kostyanet
|
|
Делается swop через доп-элемент.
|
верно
|
Сообщение от kostyanet
|
|
То есть эл2 идет в темп, эл2 меняется на эл1, а эл1 меняется на темп.
|
не верно.
|
Сообщение от kostyanet
|
|
Стандартная процедура.
|
угу
|
Сообщение от kostyanet
|
|
А, точно, там нет элемента временного хранения в явном виде, неявно им является родитель.
|
не понимаю
|
Сообщение от kostyanet
|
|
Функция такая
|
функция нерабочая
вариант с темр , для наглядности меняются элементы в разных родителях
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
</head>
<body>
<ul id="act">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<ul id="act2">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<script type="text/javascript">
var node1 = document.querySelector('#act > li:nth-child(1)'), node2 = document.querySelector('#act2 > li:nth-child(3)');
var swap_nodes=function(node1,node2) {
if(!node1 || !node2) return;
var temp = document.createElement('abracadabra');
node1.parentNode.replaceChild(temp,node1);
node2.parentNode.replaceChild(node1,node2);
temp.parentNode.replaceChild(node2,temp)
};
swap_nodes(node1,node2)
</script>
</body>
</html>
|
|
22.05.2015, 16:47
|
|
Профессор
|
|
Регистрация: 23.10.2010
Сообщений: 2,718
|
|
|
Сообщение от рони
|
|
функция нерабочая
|
В смысле? Вроде работает и давно. Это в файловом поле тумбы меняются местами. Выделяешь какую надо и стрелками влево-вправо перемещаешь ее. Без нелепого драга. Затем скрипт собирает имена файлов с этих нодов и мержит их в текстовое поле. Все работает. Прямо сейчас добавляю товары и меняю местами когда файлы забираются пачкой и порядок недетерминирован.
SWOP существует на уровне ассемблера, но там не надо думать о временном хранилище, вроде бы все идет через аккумулятор. На языке высокого уровня швопы уже приходится обеспечивать вручную. Ну вот, а в DOM в роли аккумулятора оказывается родитель. Выткнул, сместилось, воткнул, готово. Я вообще не вдавался как оно работает, нашел какой-то баян, упростил до предела и запустил.
Последний раз редактировалось kostyanet, 22.05.2015 в 16:51.
|
|
22.05.2015, 16:58
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,112
|
|
|
kostyanet,
дяденька, вы сейчас с кем разговаривали?
и где рабочий пример, если вам не трудно?
|
|
|
|
