Заполнение UL с помощью Jquery - PullRequest
Новая
       15

Заполнение UL с помощью Jquery

2 голосов
/ 07 июня 2010

Я немного озадачен этим 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>

Так что я думаю, что это работает, но не форматирует так, как я хочу. Я хочу, чтобы это остановилось на Honda и сформировало новый список. Прямо сейчас это выходит за рамки моего div.

Мой HTML настроен так: 

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

Это просто пустые ul и li (заметьте, все li должны иметь этот класс)

Так что мне нужно не только понять, что я делаю неправильно, но я не уверен, как заставить это делать то, что я хочу. Я надеюсь, что все имеет смысл! Спасибо всем!

Edit: Вот ожидаемая разметка для этого

(по какой-то причине я не могу отобразить поплавки, но представьте, что нижний 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>

Ответы [ 2 ]

2 голосов
/ 07 июня 2010

Вы просто хотите, чтобы ваш <ul> был двумя столбцами ширины <li>? Если это так, вам не нужно несколько <ul>, вы можете просто использовать некоторые стили на <li>. Попробуйте следующий CSS: 

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

JSFiddle Preview

2 голосов
/ 07 июня 2010

Я вытащил функцию успеха для удобства чтения. Ключевым моментом здесь является то, что мы помещаем все параметры в массив, а затем разбиваем их на два UL в зависимости от количества имеющихся вариантов. Вместо того, чтобы добавлять их в готовый UL, мы помещаем два новых UL в div: <div id='ulContainer'></div>.

Я действительно проверил это, чтобы убедиться, что оно работает. Затем вы можете применить любой CSS, который вам нужен, чтобы два дисплея UL выглядели так, как вам нужно.

Я проверил это перед публикацией, и это работает; со списком из 5 элементов в вашем XML вы получите список из 3 и 2-й список из 2.

Кажется, ваша проблема не столько в программировании, сколько в логике. Когда вы сталкиваетесь с трудностями, найдите время, чтобы составить список того, что вы хотели бы выполнить, выполнив небольшие действия, и это поможет вам понять, как этого добиться в коде. Вместо этого скажите: «Мне нужны два UL, созданные из списка опций». Try:

  • Получить список опций
  • Определить количество элементов в этом списке
  • Сделать 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>');

}
...