Possible Duplicate:
Using .after() to add html closing and open tags
I want to show 3 columns lists (<ul>
) with almost the same height, so I'm counting the <li>
tags and use append to generate the list dynamically. But when I do $el.append($("</ul><ul class='new'>"))
to close the current list and append a new one it appends like <ul class='new'></ul>
.
I just want to close the <ul>
tag and open it again. Is jQuery append()
function validating somehow the DOM structure? How can I get the spected result? Any better way to achieve this?
<div id="mylist">
here the list will show
</div>
var $el = $("#mylist");
$el.empty(); // remove old options
$el.append($("<ul class='new'>"));
var j = parseInt(response.length/3);
var i = 0;
$.each(response, function(key, value) {
i++;
if(i%j==0){
$el.append($("</ul><ul class='new'>")).append($("<li></li>").text(value.nombre));
}
else{
$el.append($("<li></li>").text(value.name));
}});
<div >
<ul class="new">
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
</ul><ul class="new"> //This is what I want to append
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
</ul><ul class="new">
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
</ul>
</div>
<div id="mylist">
<ul class="new"></ul>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<ul class="new"></ul>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<ul class="new"></ul>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
</div>
Simple:
LIVE DEMO
Instead of objects, play with "strings"
to set </ul><ul>
where needed.
var arr = ['1','2','3','4','5','6','7','8','9','10','11','12','13','14'];
var str = "<ul class='new'>";
for(var i=0; i<arr.length;) {
str += "<li>"+ arr[i++] +"</li>" ;
if(i%3===0) str += "</ul><ul class='new'>" ;
}
str += "</ul>" ;
$("#mylist").html( str );
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With