Jquery Wrap into groups for Bootstrap span. Make Links from UL LI

Jquery Wrap into groups for Bootstrap span. Make Links from UL LI

by Andrew Pougher

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.min.css">
  <div class="container">
    <div class="row-fluid">
        <div class="span12" id="resortlists">
    <ul class='france'>
 <li>Alpe d'Huez</li>
                <li>Aussois</li>
                <li>Avoriaz</li>
                <li>Chamonix &amp; les Houches</li>
                <li>Courchevel 1300</li>
                <li>Courchevel 1550</li>
                <li>Courchevel 1650</li>
                <li>Courchevel 1850</li>
                <li>Isola 2000</li>
                <li>Flaine</li>
                <li>La Clusaz</li>
                <li>La Plagne</li>
                <li>La Rosière</li>
                <li>La Tania</li>
                <li>Les Arcs</li>
                <li>Les Deux Alpes</li>
                <li>Les Gets</li>
                <li>Les Ménuires</li>
                <li>Megeve</li>
                <li>Méribel &amp; Mottaret</li>
                <li>Morzine</li>
                <li>Montgenèvre</li>
                <li>Puy Saint Vincent</li>
                <li>Risoul</li>
                <li>Saint Foy</li>
                <li>Saint Lary</li>
                <li>Serre Chevalier</li>
                <li>Tignes</li>
                <li>Val d'Isère</li>
                <li>Val Thorens</li>
                <li>Vaujany</li>
</ul>
</div></div></div>

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

[class*="span"] {
    background: #EEF;
    border-right:1px solid #fff
}

JavaScript

var gNum = 7;
    var p = $("ul.france > li");
    for(var i = 0; i < p.length; i+=gNum) {
      p.slice(i, i+gNum).wrapAll("<div class='span2'></div>");
    }

$('#resortlists li').each(function (i) {
var locationname =  $(this).closest('ul').attr('class');
    var link = $(this).html()
    $(this).html($(this).html().replace(link, '<i class="icon-picture "></i> <a href="#map?c=' + link + ',' + locationname + '">' + link + '</a>'));
});