Note that there are some explanatory texts on larger screens.

plurals
  1. POPopulating a UL with Jquery
    primarykey
    data
    text
    <p>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: </p> <pre><code>$.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("&lt;li&gt;"+make+"&lt;/li&gt;"); }); } }); </code></pre> <p>It's working beautifully. however when I go to look at it on my page and view the selection source it looks like this:</p> <pre><code>&lt;ul id="MakeList"&gt; &lt;li&gt;CHEVROLET&lt;/li&gt; &lt;li&gt;VINTAGE CHEVY&lt;/li&gt; &lt;li&gt;DODGE&lt;/li&gt; &lt;li&gt;VINTAGE FORD&lt;/li&gt; &lt;li&gt;FORD&lt;/li&gt; &lt;li&gt;HONDA&lt;/li&gt; &lt;li&gt;HUMMER&lt;/li&gt; &lt;li&gt;ISUZU&lt;/li&gt; &lt;li&gt;LINCOLN&lt;/li&gt; &lt;li&gt;MAZDA&lt;/li&gt; &lt;li&gt;MITSUBISHI&lt;/li&gt; &lt;li&gt;NISSAN&lt;/li&gt; &lt;li&gt;SUZUKI&lt;/li&gt; &lt;li&gt;TOYOTA&lt;/li&gt; &lt;li class="selectMake"&gt;&lt;/li&gt; &lt;/ul&gt; </code></pre> <p>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. </p> <p>My html is set up like this: </p> <pre><code>&lt;ul id="MakeList"&gt; &lt;li class="selectMake"&gt;&lt;/li&gt; &lt;/ul&gt; </code></pre> <p>It's just an empty ul and li (note, all li's are supposed to have that class)</p> <p>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! </p> <p>Edit: Here is the expected markup for this</p> <p>(I can't display floats for some reason, but imagine that the bottom UL is floating to the left)</p> <pre><code>&lt;ul&gt; &lt;li&gt;CHEVROLET&lt;/li&gt; &lt;li&gt;VINTAGE CHEVY&lt;/li&gt; &lt;li&gt;DODGE&lt;/li&gt; &lt;li&gt;VINTAGE FORD&lt;/li&gt; &lt;li&gt;FORD&lt;/li&gt; &lt;li&gt;HONDA&lt;/li&gt; &lt;/ul&gt; &lt;ul&gt; &lt;li&gt;HUMMER&lt;/li&gt; &lt;li&gt;ISUZU&lt;/li&gt; &lt;li&gt;LINCOLN&lt;/li&gt; &lt;li&gt;MAZDA&lt;/li&gt; &lt;li&gt;MITSUBISHI&lt;/li&gt; &lt;li&gt;NISSAN&lt;/li&gt; &lt;li&gt;SUZUKI&lt;/li&gt; &lt;li&gt;TOYOTA&lt;/li&gt; &lt;/ul&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload