jQuery создал вложенный список на основе атрибута - PullRequest
Новая
       16

jQuery создал вложенный список на основе атрибута

0 голосов
/ 03 октября 2011

Я застреваю при попытке реализовать рекурсивную логику в jQuery - у меня нет особой практики с этим. У меня есть простая потребность, которая заключается в том, чтобы вкладывать несортированные списки по классам. У меня есть два динамических списка на странице (они генерируются двумя запросами CAML). Первый список будет верхнего уровня <li>, а второй список будет вложенным. Первый список содержит <li> с числовыми идентификаторами, а второй список содержит <li> с числовыми классами, которые соответствуют идентификаторам, в которые они должны быть вложены. i.e.:

<ul>
    <li id="10">Parent Item 1</li>
    <li id="14">Parent Item 2</li>
</ul>
<ul>
    <li class="10">Child 1</li>
    <li class="10">Child 2</li>
    <li class="14">Child X</li>
</ul>

Со временем будет неопределенное количество родителей и детей <li> с. Кроме того, если для детей лучше использовать attr, чем класс, то это нормально. В конечном итоге я хочу добавить больше классов для CSS. Любая помощь будет принята с благодарностью.

1 Ответ

1 голос
/ 03 октября 2011

Рабочий пример здесь: http://jsfiddle.net/rkCKT/

Предполагая эту разметку: 

<ul class="parents">
    <li id="10">Parent Item 1</li>
    <li id="14">Parent Item 2</li>
</ul>
<ul class="children">
    <li class="10">Child 1</li>
    <li class="10">Child 2</li>
    <li class="14">Child X</li>
</ul>

это будет работать: 

$(document).ready(function(){
    $('ul.children li').each(function(){
        probable_parent = $('ul.parents li#' + $(this).attr('class'));
        if (probable_parent.length)
        {
            if (!probable_parent.find('ul').length) probable_parent.append('<ul/>');
            $(this).detach().appendTo(probable_parent.find('ul'));
        }
    });
});

Редактировать

Как только вы добавите какие-либо классы в .children li s для наглядности, все будет сломано.

По этой и полмиллиона другим причинам, если ваш документ HTML5, я настоятельно рекомендую использовать надлежащие атрибуты для отношений родитель-потомок. В идеале разметка должна выглядеть примерно так: 

<ul class="parents">
    <li data-itemid="10">Parent Item 1</li>
    <li data-itemid="14">Parent Item 2</li>
</ul>
<ul class="children">
    <li data-itemid="10">Child 1</li>
    <li data-itemid="10">Child 2</li>
    <li data-itemid="14">Child X</li>
</ul>
...