Jquery - поменять местами блоки
jQuery.
Есть такое: ... <td id="leftcol" width="25%" height="400" align="center"> <div>Block 1 <a class="up" href="#">Up</a><a class="down" href="#">Down</a></div> <div>Block 2 <a class="up" href="#">Up</a><a class="down" href="#">Down</a></div> <div>Block 3 <a class="up" href="#">Up</a><a class="down" href="#">Down</a></div> </td> .... При нажатии вверх должен блок с "div-ом" меняться местами с верхним блоком, аналогично и при нажатии вниз. Написал функцию, но она не работает как надо: $(document).ready(function(){ $(".up").click(function(){ var adiv = $(this).parents("div").prev() $(this).parents("div").prependTo(adiv); return false; }); $(".down").click(function(){ var adiv = $(this).parents("div").next() $(this).parents("div").appendTo(adiv); return false; }); }); Подскажите как грамотно и правильно это сделать используя jQuery |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="jquery-1.2.6.js" ></script> <script type="text/javascript"> <!-- $(document).ready(function(){ $(".up").click(function(){ var pdiv = $(this).parent('div'); pdiv.insertBefore(pdiv.prev()); return false }); $(".down").click(function(){ var pdiv = $(this).parent('div'); pdiv.insertAfter(pdiv.next()); return false }); }); //--> </script> </head> <body> <table> <tr> <td id="leftcol" width="25%" height="400" align="center"> <div>Block 1 <a class="up" href="#">Up</a><a class="down" href="#">Down</a></div> <div>Block 2 <a class="up" href="#">Up</a><a class="down" href="#">Down</a></div> <div>Block 3 <a class="up" href="#">Up</a><a class="down" href="#">Down</a></div> </td> </tr> </table> </body> </html> |
Благодарю!
|
Не понимаю как работает parent. Объясните.
Почему если внутренность <div> положить в таблицу, то этот код не работает. <div><table><tr><td>Block 1 <a class="up" href="#">Up</a><a class="down" href="#">Down</a></td></tr></table></div> Как нужно модифицировать код в этом случае? |
parent -- непосредственный родитель. Используйте closest
|
Часовой пояс GMT +3, время: 08:43. |