A pagination to a pagination

I'm trying to build an untypical Cycle navigation.

Normally it builds up like this...

<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#">7</a>

What I would like to do is to wrap every 2 elements in another div like this:

<div class="wrap">
   <a href="#">1</a>
   <a href="#">2</a>
</div>
<div class="wrap">
   <a href="#">3</a>
   <a href="#">4</a>
</div>
<div class="wrap">
   <a href="#">5</a>
   <a href="#">6</a>
</div>
<div class="wrap">
   <a href="#">7</a>
</div>

I know, that I should use

pagerAnchorBuilder

but have no idea aho to wrap things up together. Anybody have an idea how to do it correctly?

Solution

You can do this using a simple loop and slice():

var $anchors = $('a');
for (var i=0; i < $anchors.length; i+=2) {
  $anchors.slice(i, i+2).wrapAll('<div class="wrap" />');
}

Which would give you:

<div class="wrap">
   <a href="#">1</a>
   <a href="#">2</a>
</div>
<div class="wrap">
   <a href="#">3</a>
   <a href="#">4</a>
</div>
<div class="wrap">
   <a href="#">5</a>
   <a href="#">6</a>
</div>
<div class="wrap">
   <a href="#">7</a>
</div>

A pagination to a pagination

Here's a fiddle