Изменить расположение в списке
Например есть список из десяти (li), как сделать так, чтобы при нажатии кнопки, первый и третий поменялись местами на JS
|
На jQuery можно так:
$('button').click(function() {
var li = $('ul li');
li.eq(1).after(li.eq(0)).before(li.eq(2));
})
|
Sweeft,
а тут почитать не пробовали https://learn.javascript.ru/modifying-document |
Делается swop через доп-элемент. То есть эл2 идет в темп, эл2 меняется на эл1, а эл1 меняется на темп. Стандартная процедура.
|
kostyanet,
не могли бы вы привести код соотвествующий вашему описанию |
Цитата:
<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>
|
А, точно, там нет элемента временного хранения в явном виде, неявно им является родитель. Функция такая
var swap_nodes=function(node1,node2) {
if(!node1 || !node2)
return;
file_list.replaceChild(node1,node2);
file_list.insertBefore(node2,node1);
};
|
Цитата:
Цитата:
Цитата:
Цитата:
Цитата:
вариант с темр , для наглядности меняются элементы в разных родителях
<!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>
|
Цитата:
SWOP существует на уровне ассемблера, но там не надо думать о временном хранилище, вроде бы все идет через аккумулятор. На языке высокого уровня швопы уже приходится обеспечивать вручную. Ну вот, а в DOM в роли аккумулятора оказывается родитель. Выткнул, сместилось, воткнул, готово. Я вообще не вдавался как оно работает, нашел какой-то баян, упростил до предела и запустил. |
kostyanet,
дяденька, вы сейчас с кем разговаривали? и где рабочий пример, если вам не трудно? |
| Часовой пояс GMT +3, время: 12:12. |