Question

我对这个UL建筑物感到有点难过。我已经能够填充列表没有问题，但它在格式化时都搞砸了。这是我的剧本：

$.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>");
       });
    }
});

它工作得很漂亮。然而，当我在我的页面上查看它并查看选择源时，它看起来像这样：

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

所以我猜它有效，但它并没有按照我想要的方式进行格式化。我希望它停在本田并形成一个新的清单。现在它超越了我的div。

我的html设置如下：

<ul id="MakeList">
<li class="selectMake"></li>
</ul>

这只是一个空的ul和li（注意，所有的li都应该有那个类）

因此，我不仅需要弄清楚我做错了什么，而且我不确定如何让它做我想做的事。我希望一切都有意义！谢谢大家！

编辑：这是

的预期标记

（由于某些原因，我无法显示浮动，但想象底部UL浮动到左侧）

<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

为了便于阅读，我已经取消了成功功能。这里的关键是我们将所有选项放在一个数组中，然后根据它们的选项数量将它们分成两个UL。我们不是将它们附加到预制的UL中，而是将两个新的UL放在div中：<div id='ulContainer'></div>。

我实际测试过这个以确保它有效。然后，您可以应用您需要的任何css来显示两个UL的显示方式。

我在张贴之前测试了这个并且它有效;如果您的XML中包含5个项目的列表，您将获得3个列表和2个第2个列表。

您的问题似乎不是编程问题，而是逻辑问题。当您遇到困难时，请花点时间以小步骤列出您想要完成的内容，并指导您如何在代码中实现。而不是说“我需要从选项列表中生成两个UL”尝试：

获取选项列表
确定该列表中的项目数
从上半年开始制作UL
从下半场开出UL

如果您不知道如何完成其中一项具体任务，请发帖提问。

$.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 2

您是否只是希望将<ul>视为两列<li>的视觉范围？如果是这样，您不需要多个<ul>，您可以在<li>上使用某些样式。尝试以下CSS：

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

JSFiddle Preview

使用Jquery填充UL

2 个答案: