Populating a UL with Jquery
- by RachelGatlin
Hi Guys, I'm a little bit stumped with this UL I'm building. I've been able to populate the list no problem but it's all messed up when it comes to formatting. Here's my script:
$.ajax({
type: "GET",
url: "/shop/assets/xml/tonneau_makes.xml",
dataType: "xml",
success: function(xml) {
var selectInfo = $("li.selectMake");
$(xml).find('option').each(function(){
var make = $(this).attr('make');
$("li.selectMake").before("<li>"+make+"</li>");
});
}
});
It's working beautifully. however when I go to look at it on my page and view the selection source it looks like this:
<ul id="MakeList">
<li>CHEVROLET</li>
<li>VINTAGE CHEVY</li>
<li>DODGE</li>
<li>VINTAGE FORD</li>
<li>FORD</li>
<li>HONDA</li>
<li>HUMMER</li>
<li>ISUZU</li>
<li>LINCOLN</li>
<li>MAZDA</li>
<li>MITSUBISHI</li>
<li>NISSAN</li>
<li>SUZUKI</li>
<li>TOYOTA</li>
<li class="selectMake"></li>
So I guess it is working, but it's not formatting the way I want it to. I want it to stop at Honda and form a new list. Right now it's extending beyond my div.
My html is set up like this:
<ul id="MakeList">
<li class="selectMake"></li>
</ul>
It's just an empty ul and li (note, all li's are supposed to have that class)
So not only do I need to figure out what I'm doing wrong, but I'm not sure how to get it to do what I want. I hope that all made sense! Thanks everybody!
