Javascript-форум - Перемещение субкатегорий вместе с категориями

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Перемещение субкатегорий вместе с категориями (https://javascript.ru/forum/jquery/15818-peremeshhenie-subkategorijj-vmeste-s-kategoriyami.html)

Перемещение субкатегорий вместе с категориями

Присутствует следующий код:

<script language="JavaScript" type="text/javascript" src="/scripts/jquery-1.5.min.js"></script>
<script type="text/javascript"> 
<!-- 
$(document).ready(function(){ 
    $(".up").click(function(){ 
        var pdiv = $(this).parent("li");
        pdiv.insertBefore(pdiv.prev());
        return false 
    }); 
    $(".down").click(function(){ 
        var pdiv = $(this).parent("li"); 
        pdiv.insertAfter(pdiv.next()); 
        return false 
    }); 
}); 
//-->
</script>

<ul>
	<li>
	<input type="checkbox" name="ID1" id="ID1" checked />
	<label for="ID1">Category 1</label>
	<a class="up" href="#">Вверх</a> <a class="down" href="#">Вниз</a>
	</li>
	<li>
	<input type="checkbox" name="ID3" id="ID3" checked />
	<label for="ID3">Category 2</label>
	<a class="up" href="#">Вверх</a> <a class="down" href="#">Вниз</a>
	</li>
		<ul>
			<li>
			<input type="checkbox" name="ID10" id="ID10" checked />
			<label for="ID10">Category 2 Subcaterogy</label>
			<a class="up" href="#">Вверх</a> <a class="down" href="#">Вниз</a>
			</li>
		</ul>
	<li>
	<input type="checkbox" name="ID6" id="ID6" checked />
	<label for="ID6">Category 3</label>
	<a class="up" href="#">Вверх</a> <a class="down" href="#">Вниз</a>
	</li>
</ul>

В JavaScript неособо силён, поэтому прошу помощи - в данном виде код рабочий, но при перемещении элемента "Category 2" не перемещается вместе с ним элемент "Category 2 Subcaterogy", возможно ли их перемещать вместе. Чувствую, что решение очень простое, но сходу мне невидно.

Цитата:

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

Чувствую, что решение очень простое, но сходу мне невидно.

как в воду смотрел :)

<!DOCTYPE HTML>
<html>
<body>   

<ul>
  <li>
  <input type="checkbox" name="ID1" id="ID1" checked />
  <label for="ID1">Category 1</label>
  <a class="up" href="#">Вверх</a> <a class="down" href="#">Вниз</a>
  </li>
  <li>
  <input type="checkbox" name="ID3" id="ID3" checked />
  <label for="ID3">Category 2</label>
  <a class="up" href="#">Вверх</a> <a class="down" href="#">Вниз</a>
    <ul>
      <li>
      <input type="checkbox" name="ID10" id="ID10" checked />
      <label for="ID10">Category 2 Subcaterogy</label>
      <a class="up" href="#">Вверх</a> <a class="down" href="#">Вниз</a>
      </li>
    </ul>
  </li>
  <li>
  <input type="checkbox" name="ID6" id="ID6" checked />
  <label for="ID6">Category 3</label>
  <a class="up" href="#">Вверх</a> <a class="down" href="#">Вниз</a>
  </li>
</ul>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function(){
    $(".up").click(function(){
    console.log(2);
        var pdiv = $(this).parent("li");
        pdiv.insertBefore(pdiv.prev());
        return false
    });
    $(".down").click(function(){
        var pdiv = $(this).parent("li");
        pdiv.insertAfter(pdiv.next());
        return false
    });
});
//-->
</script>
  
</body>
</html>

точно, спасибо, совсем вылетела из головы вставка в <li> нового списка <ul>, даже от просмотра кода несразу понял что изменилось