Populating a UL with Jquery

Question

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>
</ul>

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!

Edit: Here is the expected markup for this

(I can't display floats for some reason, but imagine that the bottom UL is floating to the left)

<ul>
  <li>CHEVROLET</li>
  <li>VINTAGE CHEVY</li>
  <li>DODGE</li>
  <li>VINTAGE FORD</li>
  <li>FORD</li>
  <li>HONDA</li>  
</ul>
<ul> 
  <li>HUMMER</li>
  <li>ISUZU</li>
  <li>LINCOLN</li>
  <li>MAZDA</li>
  <li>MITSUBISHI</li>
  <li>NISSAN</li>
  <li>SUZUKI</li>
  <li>TOYOTA</li>
</ul>

Answer 1

I'm a little bit confused, about the whole thing. I couldn't figure where you tell your code that it should stop at a specific point HONDA you mentioned. Should it stop there like everytime or should it stop after a specific amount of li's ?

Maybe try something like this:

$.ajax({
  type: "GET",
  url: "/shop/assets/xml/tonneau_makes.xml",
  dataType: "xml",
  success: function(xml) {
     // var selectInfo = $("li.selectMake");   // you're caching but never using it
     $(xml).find('option').each(function(){
       var make  = $(this).attr('make');           

       $('#MakeList').append('<li>'+make+'</li>')           
     });
  }
});

If I think about it, you actually should create those UL elements also on the fly, within your success handler. Like,

var $temp = $('<ul/>', {
    class:  'myclass'
});

$temp.append('<li class=\'selectMake\'>'+make+'</li>');
// ...
$temp.appendTo('#my_container_div');

EDIT

Here is the example I promised:

http://jsbin.com/ufeda

Answer 2

I've pulled the success function out for readability. The key here is we're putting all the options in an array and then breaking them up into two UL's depending on the number of options they are. Instead of appending them to a premade UL, we're putting two new UL's inside a div: <div id='ulContainer'></div>.

I've actually tested this to make sure it works. You can then apply whatever css you need to make the two UL's display how you'd like.

I tested this before posting and it works; with a list of 5 items in your XML you'll get a list of 3 and a 2nd list of 2.

Your problem seems to be less one of programming and more one of logic. When you encounter a difficulty, take the time to make a list of what you'd like to accomplish in small steps and that will guide you to how to make it happen in code. Rather then say "I need two UL's produced from a list of options" try:

• Get a list of options
• Determine the number of items in that list
• Make an UL out of the first half
• Make an UL out of the second half

and if you don't know how to accomplish one of those specific tasks, post a question.

$.ajax({
  type: "GET",
  url: "data.xml",
  dataType: "xml",
  success: parseData
});

function parseData(XML) {
    // get an array of all the option tags from your XML
    var options = $(XML).find('option');

    // figure out the half-way point
    var half_point = Math.floor(options.length/2);

    // we're going to create our HTML in here
    var spool = '';

    for(x=0; x<=half_point; x++) {
      spool += '<li>' + $(options[x]).attr('make') + '</li>';
    }
    $('#ulContainer').append('<ul>' + spool + '</ul>');

    // and make your second UL
    spool = '';
    for(x=half_point+1; x<options.length; x++) {
        spool += '<li>' + $(options[x]).attr('make') + '</li>';
    }
    $('#ulContainer').append('<ul>' + spool + '</ul>');

}

Answer 3

Are you just looking to make your <ul> be two columns of <li>'s wide visually? If so, you don't need multiple <ul> you can just use some styles on the <li>. Try the following CSS:

#MakeList li {   
  display:inline-block;
  text-align:left;
  vertical-align:top;
  width: 45%;
  padding: 0;
  margin: 0;
}

JSFiddle Preview