Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.05.2015, 14:23
Новичок на форуме
Отправить личное сообщение для Sweeft Посмотреть профиль Найти все сообщения от Sweeft
 
Регистрация: 26.04.2013
Сообщений: 4

Изменить расположение в списке
Например есть список из десяти (li), как сделать так, чтобы при нажатии кнопки, первый и третий поменялись местами на JS
Ответить с цитированием
  #2 (permalink)  
Старый 20.05.2015, 14:48
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 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.
Ответить с цитированием
  #3 (permalink)  
Старый 20.05.2015, 14:55
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

Sweeft,
а тут почитать не пробовали https://learn.javascript.ru/modifying-document
Ответить с цитированием
  #4 (permalink)  
Старый 21.05.2015, 21:30
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

Делается swop через доп-элемент. То есть эл2 идет в темп, эл2 меняется на эл1, а эл1 меняется на темп. Стандартная процедура.
Ответить с цитированием
  #5 (permalink)  
Старый 21.05.2015, 22:34
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

kostyanet,
не могли бы вы привести код соотвествующий вашему описанию
Ответить с цитированием
  #6 (permalink)  
Старый 21.05.2015, 23:47
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

Сообщение от 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>
Ответить с цитированием
  #7 (permalink)  
Старый 22.05.2015, 09:55
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 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);
		};
Ответить с цитированием
  #8 (permalink)  
Старый 22.05.2015, 11:25
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

Сообщение от 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>
Ответить с цитированием
  #9 (permalink)  
Старый 22.05.2015, 16:47
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

Сообщение от рони
функция нерабочая
В смысле? Вроде работает и давно. Это в файловом поле тумбы меняются местами. Выделяешь какую надо и стрелками влево-вправо перемещаешь ее. Без нелепого драга. Затем скрипт собирает имена файлов с этих нодов и мержит их в текстовое поле. Все работает. Прямо сейчас добавляю товары и меняю местами когда файлы забираются пачкой и порядок недетерминирован.

SWOP существует на уровне ассемблера, но там не надо думать о временном хранилище, вроде бы все идет через аккумулятор. На языке высокого уровня швопы уже приходится обеспечивать вручную. Ну вот, а в DOM в роли аккумулятора оказывается родитель. Выткнул, сместилось, воткнул, готово. Я вообще не вдавался как оно работает, нашел какой-то баян, упростил до предела и запустил.

Последний раз редактировалось kostyanet, 22.05.2015 в 16:51.
Ответить с цитированием
  #10 (permalink)  
Старый 22.05.2015, 16:58
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

kostyanet,
дяденька, вы сейчас с кем разговаривали?
и где рабочий пример, если вам не трудно?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Изменить класс родительского элемента STyLe Общие вопросы Javascript 1 29.05.2014 20:21
Как изменить цвет и размер шрифта в Java savas332 Серверные языки и технологии 3 09.01.2014 17:02
Как изменить расположение картинки и выпадающего меню Edison1 Общие вопросы Javascript 1 26.11.2012 09:43
Размер в процентах. Мозила отличилась. PashPP (X)HTML/CSS 10 12.09.2012 19:22
как изменить css свойсво нескольких елементов? IIIgun Общие вопросы Javascript 17 12.08.2011 12:20