Обход неупорядоченных списков с использованием Javascript/Jquery

Допустим, у меня есть неупорядоченный вложенный список:

<ul>
   <li>Item a1</li>
   <li>Item a2</li>
   <li>Item a3</li>
       <ul>
           <li>Item b1</li>
           <li>Item b2</li>
           <li>Item b3</li>
            <ul>
               <li>Item c1</li>
               <li>Item c2</li>
               <li>Item c3</li>             
            </ul>
           <li>Item b4</li>
       </ul>
  <li>Item a4</li>
</ul>

Мне нужно пройти его и сохранить в двумерном массиве (в конечном счете, я просто пытаюсь преобразовать его в объект JSON). Мне разрешено использовать как Jquery, так и/или Javascript. Как мне поступить?

Спасибо


javascript list jquery traversal
person dsignr    schedule 01.07.2010    source источник
comment
Глядя на этот список, вы выглядите так, как будто у вас есть как минимум трехмерная структура данных (три вложенных списка). Не могли бы вы уточнить, как вы хотите, чтобы ваш выходной массив выглядел? Также я не думаю, что вы можете вкладывать ‹ul› непосредственно в другой ‹ul›. Я предполагаю, что он должен быть внутри ‹li›, непосредственно предшествующего ему...   -  person Chris    schedule 01.07.2010
comment
Спасибо, Крис, мне нужен объект JSON в качестве вывода. Кроме того, я также буду в порядке с двумя вложенными списками. Спасибо   -  person dsignr    schedule 01.07.2010

Ответы (3)


arrow_upward
2
arrow_downward

Я не уверен, как именно вы хотите, чтобы результирующая структура данных выглядела, но это (в котором используется некоторый jQuery):

$(function() {

    var result = {};

    function createNewLevel(parent,items) {
        var length = items.length;
        for(var i = 0; i < length; i++) {
            if(items[i].tagName == 'UL') {
                parent['ul' + i] = {};
                createNewLevel(parent['ul' + i],$(items[i]).children().get());
            } else {
                parent['li' + i] = $(items[i]).text();
            }
        }
    }

    createNewLevel(result, $('ul:first').get());

    console.log(result);

});

... создаст эту структуру

{
    ul0: {
        li0: "Item a1",
        li1: "Item a2",
        li2: "Item a3",
        li4: "Item a4",
        ul3: {
            li0: "Item b1",
            li1: "Item b2",
            li2: "Item b3",
            li4: "Item b4",
            ul3: {
                li0: "Item c1",
                li1: "Item c2",
                li2: "Item c3"
            }
        }
    }
}

Его можно было довольно легко настроить, чтобы изменить детали результирующей структуры, если это необходимо.

Обратите внимание, что это объект javascript. Если вам действительно нужен объект JSON, вам просто нужно преобразовать его с помощью var jsonResult = JSON.stringify( result );

person user113716    schedule 01.07.2010
comment
Мне кажется странным, когда люди отмечают ответ как правильный, но не голосуют за него. - person Samuel Meacham; 04.07.2010

arrow_upward
0
arrow_downward

С JQuery попробуйте:

$.each($("li"), function(index, value) { 
  alert(value); 
});
person JochenJung    schedule 01.07.2010

arrow_upward

arrow_downward

person    schedule
comment
@Chris - О, извини, ты так прав! Глупая ошибка относительно вложенности ul's (сейчас отредактирую). Что касается моего вывода, мне нужно, чтобы он выглядел так: { имя: элемент a1 дочерние элементы: [], имя: элемент a2 дочерние элементы: [], имя: элемент a3 дочерние элементы: [{ имя: элемент b1 дочерние элементы: [], имя :элемент b2 дочерние элементы:[], имя:элемент b3 дочерние элементы:[{ имя:элемент c1 дочерние элементы:[] }], }] } - person dsignr; 01.07.2010
comment
скорее: { {имя: элемент a1 дочерние элементы: []}, {имя: элемент a2 дочерние элементы: []}, {имя: элемент a3 дочерние элементы: [ {имя: элемент b1 дочерние элементы: []}, {имя: элемент b2 дочерние элементы: :[]}, {имя:элемент b3 дочерние элементы:[ {имя:элемент c1 дочерние элементы:[]} ]}, ]} } - person gblazex; 01.07.2010
comment
@Galambalazs Да, да ... вот и все (извините за неразборчивый код), у вас есть какой-нибудь код для такого форматирования моего вывода? - person dsignr; 01.07.2010