jquery - 使用 Jquery 填充 UL

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 都应该具有该类)

所以我不仅需要弄清楚我做错了什么，而且我不知道如何让它做我想做的事。我希望这一切都有道理!谢谢大家!

编辑:这是预期的标记

(由于某种原因我无法显示 float ，但想象一下底部 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 个项目的第二个列表。

您的问题似乎不是编程问题，而是逻辑问题。当您遇到困难时，花点时间列出您希望通过小步骤完成的任务，这将指导您如何在代码中实现它。而不是说“我需要从选项列表中生成两个 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>');

}