[jQuery] Grouping tags and surrounding each group with a div
Hi all,
The code below is producing this:
<div id="searchResults">
<li class="searchResultsItem"><h4>Title</h4>lalala
</li>
<li class="searchResultsItem"><h4>Title</h4>lalala
</li>
<li class="searchResultsItem"><h4>Title</h4>lalala
</li>
<li class="searchResultsItem"><h4>Title</h4>lalala
</li>
<li class="searchResultsItem"><h4>Title</h4>lalala
</li>
<li class="searchResultsItem"><h4>Title</h4>lalala
</li>
<li class="searchResultsItem"><h4>Title</h4>lalala
</li>
</div>
But I need to get :
<div id="searchResults">
<div id="div1">
<li class="searchResultsItem"><h4>Title</h4>lalala
</li>
<li class="searchResultsItem"><h4>Title</h4>lalala
</li>
<li class="searchResultsItem"><h4>Title</h4>lalala
</li>
<li class="searchResultsItem"><h4>Title</h4>lalala
</li>
<li class="searchResultsItem"><h4>Title</h4>lalala
</li>
<li class="searchResultsItem"><h4>Title</h4>lalala
</li>
</div>
<div id="div2">
<li class="searchResultsItem"><h4>Title</h4>lalala
</li>
</div>
</div>
As you may have guessed contentLenght is dynamic, coming from
webservice. For this example its value is 7 but it can be 9 or 23
etc..
The idea is to group the <li> tags in six surrounded by numbered divs
for each group, just like the previous example.
How can I do it?
Thanks in advance!
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/
jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
var playlistContentBuilderSearch='';
var contentLenght = 7;
for(var i=0;i < contentLenght;i++){
playlistContentBuilderSearch += "<li
class='searchResultsItem'>";
playlistContentBuilderSearch += "<h4>Title</
h4>";
playlistContentBuilderSearch += "lalala</
p>";
playlistContentBuilderSearch += "</li>";
}
$("#searchResults").html(playlistContentBuilderSearch);
});
</script></head>
<body>
<div id="searchResults"></div>
</body>