Поменять html элементы местами js

Добавлено через 15 минут
ЗЫ: да, убрал тэг формы, перенес id на tr — всё заработало.

Теперь другой вопрос. .prev и .next — смотрят соседние элементы во всем дереве, или можно задать рассматривать в контексте конкретного родительского элемента? Ведь нужно определить, какой элемент соседний с текущим, чтобы перенести строку до/после него. И возможно ли сделать проверку на существование предыдущего/следующего элемента?

$(«#query_row > tr»); — так я нахожу первую строку в таблице
текущая строка с тогда
$(«#5»).prev(); — предыдущая строка
$(«#5»).туче(); — следующая строка
$(«#query_row tr:first»); первая строка
$(«#query_row tr:last»); последняя строка

Сообщение от Alex_VP

вот такой вопрос в продолжение.
Надо сначала удалить элемент, потом вставить его содержимое на нужное место (пробовал наоборот — получил фиг). А значит надо как-то получить id элемента, предыдущего перемещаемому. Пробовал вот так — не выходит:

var moveblock = $("#curr").get(0); var moveid = $("#curr").prev().attr("id").val(); $("#curr").remove(); $("#"+moveid).before(moveblock);

Менять местами так — вырезаем элемент в переменную — detach() Затем после нужного элемента вставляем содержимое вырезанного элемента
пример

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

html> head> title>Меняем местами - но берём содержимое/title> meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> script src="http://code.jquery.com/jquery-1.9.1.min.js">/script> script type="text/javascript"> $(document).ready(function()< var block1=$('#block1').detach(); $('#block2').after(block1.html()); >);/*end ready*/ /script> style> #block1 < width:600px; height:50px; margin-top:20px; background:#c4fdc7; border: 2px solid #2f7807 >#block2 < width:600px; height:50px; margin-top:20px; background:#d9e916; border: 2px solid #220bf4 >/style> /head> body style="padding-left:140px;"> div id="block1">span style="font-weight: bold">block1/span>/div> div id="block2">block2/div> /body> /html>

Спасибо, примерно так оно и работает, но. строк в таблице много, в результате сортировок порядок их меняется, и следовательно я не могу вот так явно проставить id блока, до/после которого надо вставлять вырезанный блок. Хотя могу конечно, но в этом случае при выводе таблицы на сервере мне надо будет хранить одновременно значения трех строк, возвращенных из БД (предыдущая, текущая, следующая). И даже если я заморочусь и проставлю на сервере идентификаторы соответствующим строкам таблицы — после первой же перестановки строк местами порядок их следования изменится. То есть возвращаемся к вопросу: надо динамически получать элемент, предшествующий/последующий к указанному (перемещаемому).

Добавлено через 22 минуты
В таблице каждая строка имеет свой id
Однако допустим для последней строки

var moveid = $("#curr_id").prev("tr").attr("id");

Не совсем понял, что Вы хотите
Есть таблица с множеством строк при клике по строке она должна поменяться местами с той строкой, что ниже?
Нужны более детальные пояснения не прежде нужно исправить Ваш html код

table id="query_row"> form id="8">tr>td>. /td> td>img id="btntop8" src="up.png" title="Вверх">/td> td>img id="btnbottom8" src="down.png" title="Вниз">/td>/tr>/form> form id="5"> . /form> . form id="12">. /form> /table>

Вы хотите, чтобы перемещение было и в базе данных, а не только в браузере?

Приведу подробнее.
код на данный момент такой (так думаю весь этот набор js можно сильно сократить, но впервую мне главное, чтобы заработало, а потом и оптимизировать код можно).
Страница формируется из шаблона smarty, и в браузер уже попадает в следующем виде:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175

table id="query_row" class="query_row"> tr id="5"> td width=300px style='background-color:#cccccc'>b>Активный товар с IMG/b>/td> td style='background-color:#cccccc'>img id="btntop5" src="/avpextra/img/up_16.png" title="Вверх">/td> td style='background-color:#cccccc'>img id="btnbottom5" src="/avpextra/img/down_16.png" title="Вниз">/td> /td> /tr> script> $(document).ready(function()< $('#btntop5').click(function()< $.ajax(< url: "/artadmin.php", type: "GET", data: "ajax&mod=mysql_query_db&action=top&id=5", cache: false, success: function(data)  $(".ajax").html(data); var moveblock = $("#5").get(0); // var moveid = $("#5").prev("tr").attr("id"); var listitem = $("#5").index("tr") - 1; $("#5").remove(); // $("#"+moveid).before(moveblock); $("tr:eq(listitem)").before(moveblock); $("#query_row tr:even td").css("background-color","#cccccc"); $("#query_row tr:odd td").css("background-color","transparent"); console.log(listitem); > >); >); $('#btnbottom5').click(function()< $.ajax(< url: "/artadmin.php", type: "GET", data: "ajax&mod=mysql_query_db&action=bottom&id=5", cache: false, success: function(data)  $(".ajax").html(data); > >); >); >); /script> tr id="1"> td width=300px >b>Формат HTML рассылки/b>/td> td >img id="btntop1" src="/avpextra/img/up_16.png" title="Вверх">/td> td >img id="btnbottom1" src="/avpextra/img/down_16.png" title="Вниз">/td> /tr> script> $(document).ready(function()< $('#btntop1').click(function()< $.ajax(< url: "/artadmin.php", type: "GET", data: "ajax&mod=mysql_query_db&action=top&id=1", cache: false, success: function(data)  $(".ajax").html(data); var moveblock = $("#1").get(0); // var moveid = $("#1").prev("tr").attr("id"); var listitem = $("#1").index("tr") - 1; $("#1").remove(); // $("#"+moveid).before(moveblock); $("tr:eq(listitem)").before(moveblock); $("#query_row tr:even td").css("background-color","#cccccc"); $("#query_row tr:odd td").css("background-color","transparent"); console.log(listitem); > >); >); $('#btnbottom1').click(function()< $.ajax(< url: "/artadmin.php", type: "GET", data: "ajax&mod=mysql_query_db&action=bottom&id=1", cache: false, success: function(data)  $(".ajax").html(data); > >); >); >); /script> tr id="6"> td width=300px style='background-color:#cccccc'>b>Скрытый товар без IMG/b>/td> td style='background-color:#cccccc'>img id="btntop6" src="/avpextra/img/up_16.png" title="Вверх">/td> td style='background-color:#cccccc'>img id="btnbottom6" src="/avpextra/img/down_16.png" title="Вниз">/td> /tr> script> $(document).ready(function()< $('#btntop6').click(function()< $.ajax(< url: "/artadmin.php", type: "GET", data: "ajax&mod=mysql_query_db&action=top&id=6", cache: false, success: function(data)  $(".ajax").html(data); var moveblock = $("#6").get(0); // var moveid = $("#6").prev("tr").attr("id"); var listitem = $("#6").index("tr") - 1; $("#6").remove(); // $("#"+moveid).before(moveblock); $("tr:eq(listitem)").before(moveblock); $("#query_row tr:even td").css("background-color","#cccccc"); $("#query_row tr:odd td").css("background-color","transparent"); console.log(listitem); > >); >); $('#btnbottom6').click(function()< $.ajax(< url: "/artadmin.php", type: "GET", data: "ajax&mod=mysql_query_db&action=bottom&id=6", cache: false, success: function(data)  $(".ajax").html(data); > >); >); >); /script> tr id="2"> td width=300px >b>Подписка на отсутствующий товар/b>/td> td >img id="btntop2" src="/avpextra/img/up_16.png" title="Вверх">/td> td >img id="btnbottom2" src="/avpextra/img/down_16.png" title="Вниз">/td> /tr> script> $(document).ready(function()< $('#btntop2').click(function()< $.ajax(< url: "/artadmin.php", type: "GET", data: "ajax&mod=mysql_query_db&action=top&id=2", cache: false, success: function(data)  $(".ajax").html(data); var moveblock = $("#2").get(0); // var moveid = $("#2").prev("tr").attr("id"); var listitem = $("#2").index("tr") - 1; $("#2").remove(); // $("#"+moveid).before(moveblock); $("tr:eq(listitem)").before(moveblock); $("#query_row tr:even td").css("background-color","#cccccc"); $("#query_row tr:odd td").css("background-color","transparent"); console.log(listitem); > >); >); $('#btnbottom2').click(function()< $.ajax(< url: "/artadmin.php", type: "GET", data: "ajax&mod=mysql_query_db&action=bottom&id=2", cache: false, success: function(data)  $(".ajax").html(data); > >); >); >); /script> /table>

вот тут я уже попробовал через селектор :eq, но снова безрезультатно. кроме кнопок вверх, вниз — есть кнопки выполнить, сохранить изменения, отменить изменения, удалить строку — с ними я уже разобрался, работают, поэтому отсюда из кода вырезал

Добавлено через 17 минут
Работает вот такой вариант:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

$('#btntop5').click(function(){ $.ajax({ url: "/artadmin.php", type: "GET", data: "ajax&mod=mysql_query_db&action=top&id=5", cache: false, success: function(data){ $(".ajax").html(data); var moveblock = $("#5").get(0); var listitem = $("#5").index("tr") - 1; $("#5").remove(); $("tr:eq("+listitem+")").before(moveblock); $("#query_row tr:even td").css("background-color","#cccccc"); $("#query_row tr:odd td").css("background-color","transparent"); console.log(listitem); } }); });

но для каждой строки срабатывает только один раз — при повторной попытке переместить вверх эту же строку никакого действия не происходит

Добавлено через 9 минут
После такого перемещения (удаления элемента и вставки его копии) не срабатывают и остальные действия, относящиеся к этой строке. Похоже, что вставленный элемент считается новым, другим элементом, и функции, вызываемые кликом по соответствующим кнопкам, пытаются обратиться к элементу уже удаленному.

Добавлено через 18 минут
Вобщем, пока решил вопрос добавлением

setTimeout('window.location.reload()',500);

в конец каждой функции, перемещающей элементы. То есть переместили элементы, вывели что на сервере всё сделано верно, показали результат перемещения, и загрузили страницу с новым порядком элементов. Всё работает так как надо. но хотелось бы докопаться, как же это сделать без перезагрузки.

Добавлено через 21 час 17 минут
Итак. перезагрузка страницы — это конечно отлично, но зачем тогда ajax? Как я понимаю, при удалении строки и вставке её копии — обработчики событий по кнопкам остаются привязанными к удаленным элементам. Решил и этот вопрос копированием и вставкой строки вместе с привязанными к строке функциями:

в таком виде не работало, так как строка удалялась, а привязанные к ней обработчики оставались. К новой же строке, копии удаленной — не оказывалось привязанных обработчиков. После того как сделал так:

всё заработало.

поменять местами элементы первой и второй строк, элементы третьей и четвертой и т.д.
В матрице NxN (N — четное), поменять местами элементы первой и второй строк, элементы третьей и.

Поменять местами диагональные элементы и минимальные элементы в соответствующей строке матрицы
Поменять местами диагональные элементы и минимальные элементы в соответствующей строке матрицы.

Поменять в массиве местами первые и минимальные элементы, последний и максимальные элементы
2. При помощи случайных чисел вывести одномерный массив состоящий из 15 элементов. Найти в нем.

Поменять местами максимальные элементы 1 и 3 столбцов и минимальные элементы 2 и 4 строки матрицы
Поменять местами максимальные элементы первого и третьего столбцов и минимальные элементы второй и.

Источник