Цикл одного и того же набора функций в jQuery

Question

У меня есть этот HTML:

<div class="container">

    <a class="button" href="#">John Doe</a>
    <a class="button" href="#">Jane Doe</a>
    <a class="button" href="#">Will Smith</a>
    <a class="button" href="#">Bill Smith</a>
    <a class="button" href="#">Tony Danza</a>

</div>
<div class="another-div"></div>

Я хочу разделить эти a.button на группы по 4 и обернуть их в div с помощью jQuery, что я делаю так:

<script type="text/javascript">
jQuery(document).ready(function($) {

  $('.container a.button').slice( 0, 4 ).wrapAll('<div class="wrapper"></div>');
  $('div.wrapper').each(function(){
      $(this).appendTo('.another-div');
  });

  /* Just repeating that again below... */

  $('.container a.button').slice( 0, 4 ).wrapAll('<div class="wrapper"></div>');
  $('div.wrapper').each(function(){
      $(this).appendTo('.another-div');
  });

  /* ...and so on. */

 });
</script>

Обратите внимание, что после того, как я использую .slice() и .wrapAll(), я перемещаю их вниз в div.wrapper, так что в итоге ничего не останется в оригинальном .container div.

Может быть 10 или 100 с a.button. Есть ли способ повторить это действие, не вставляя один и тот же код снова и снова? Есть ли какой-то тип цикла, который я мог бы сделать, чтобы проверить, есть ли еще экземпляры $('.container a.button')?

Answer 1

Обновите функцию скрипта, как показано ниже, надеюсь, это поможет

<script type="text/javascript">

  
 $(document).ready(function(){
	$(".container a.button").each(function(){
		$(this).wrap('<div class="wrapper"></div>');
	});
	
	var allchildren = $(".container").children();
	$(".another-div").append(allchildren);
 });
 
</script>