[jQuery] Grouping tags and surrounding each group with a div

Wed, 07 Oct 2009 10:32:39 -0700 

Hi all,

The code below is producing this:

<div id="searchResults">
<li class="searchResultsItem"><h4>Title</h4><p>lalala</p></li>
<li class="searchResultsItem"><h4>Title</h4><p>lalala</p></li>
<li class="searchResultsItem"><h4>Title</h4><p>lalala</p></li>
<li class="searchResultsItem"><h4>Title</h4><p>lalala</p></li>
<li class="searchResultsItem"><h4>Title</h4><p>lalala</p></li>
<li class="searchResultsItem"><h4>Title</h4><p>lalala</p></li>
<li class="searchResultsItem"><h4>Title</h4><p>lalala</p></li>
</div>


But I need to get :

<div id="searchResults">
<div id="div1">
<li class="searchResultsItem"><h4>Title</h4><p>lalala</p></li>
<li class="searchResultsItem"><h4>Title</h4><p>lalala</p></li>
<li class="searchResultsItem"><h4>Title</h4><p>lalala</p></li>
<li class="searchResultsItem"><h4>Title</h4><p>lalala</p></li>
<li class="searchResultsItem"><h4>Title</h4><p>lalala</p></li>
<li class="searchResultsItem"><h4>Title</h4><p>lalala</p></li>
</div>
<div id="div2">
<li class="searchResultsItem"><h4>Title</h4><p>lalala</p></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 += "<p>lalala</
p>";
                        playlistContentBuilderSearch += "</li>";

  }
        $("#searchResults").html(playlistContentBuilderSearch);
        });
  </script></head>
  <body>
<div id="searchResults"></div>
  </body>

Reply via email to