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!