Подтвердить что ты не робот

Селектор CSS для ориентации только на непосредственных детей, а не на других идентичных потомков

У меня есть вложенный сортируемый список, который может содержать элементы, динамически добавленные или удаленные, и может быть вложенными n-уровнями глубоко. При вложенности новый элемент ul вводится в любой элемент li, выбранный как родительский. Начальное состояние списка выглядит примерно так:

<ul id="parent">
    <li id="One"><a href="" class="listLink"><span class="position">1</span>One</a></li>
    <li id="Two"><a href="" class="listLink"><span class="position">2</span>Two</a></li>
    <li id="Three"><a href="" class="listLink"><span class="position">3</span>Three</a>
        <ul>
            <li id="A"><a href="" class="listLink"><span class="position">1</span>A</a></li>
            <li id="B"><a href="" class="listLink"><span class="position">2</span>B</a></li>
            <li id="C"><a href="" class="listLink"><span class="position">3</span>C</a></li>
            <li id="D"><a href="" class="listLink"><span class="position">4</span>D</a></li>
            <li id="E"><a href="" class="listLink"><span class="position">5</span>E</a></li>
            <li id="F"><a href="" class="listLink"><span class="position">6</span>F</a></li>                    
        </ul>
    </li>   
    <li id="Four"><a href="" class="listLink"><span class="position">4</span>Four</a></li>
    <li id="Five"><a href="" class="listLink"><span class="position">5</span>Five</a></li>
    <li id="Six"><a href="" class="listLink"><span class="position">6</span>Six</a></li>                    
</ul>

Я использую MooTools для сортировки и т.д., и он работает нормально, но у меня возникают проблемы с правильной настройкой текста позиции при сортировке. Каждый CSS-селектор, который я пытаюсь использовать, также включает в себя все дочерние элементы, а не только элементы li, которые входят в список, а не какие-либо элементы подписок. Предположим, что за исключением id, position и text, каждый элемент li во всех списках идентичен всем остальным. Есть ли селектор для получения только непосредственных детей? Есть ли другой способ сделать это?

Я попробовал некоторые дочерние селекторы, как упомянутые:

  • ul > li Выберет все элементы li, которые являются дочерними элементами ul, а не только непосредственно дочерние элементы
  • #parent > li Делает то же, что и выше.

Вот функция, которую я сейчас запускаю при отбрасывании элемента, который не обрабатывает сортировку, которая отлично работает, просто обновляя позицию. Обратите внимание, что это также синтаксис MooTools:

var drop = function(el){
    el.getParents('ul').reverse().each(function(item){
        var posCount = 1;
        item.getElements('li a span[class=position]').each(function(pos){
            pos.set('text', posCount);
            posCount++;
        });
    });
}

В настоящее время изменение любого порядка предметов на основном уровне будет нумеровать все 1-12, даже подсписок. Изменение любого элемента в подсписке даст правильные номера для этого списка, но заставляет родительские списки неправильно подсчитывать все дочерние элементы li в нумерации.

Я чувствую, что это уродливый взлом, но он работает:

var drop = function(){
    var ulCount = 1;
    $$('ul').each(function(item){
        if(item.get('id') != 'parent') { 
            item.set('id', 'id-'+ulCount);
        }
        var elId = item.get('id');
        var posCount = 1;
        $(document).getElements('#'+elId+'>li>a>span[class=position]').each(function(pos){
            pos.set('text', posCount);
            posCount++;
        });
        ulCount++;
    });
}
4b9b3361

Ответ 1

ul > li

только ближайшие дети. Так, например, чтобы использовать только элементы списка верхнего уровня, которые вы могли бы использовать:

#parent > li

Примечание. это не поддерживается в IE6.

Общим решением для обратной совместимости является выполнение примерно так:

#parent li { /* style appropriately */ }
#parent li li { /* back to normal */ }

Это утомительно, потому что вы должны применять стили, а затем отключать их (и, возможно, не обязательно знать, что такое старые значения), но это единственный доступный для IE6 чистый способ обхода CSS.

Изменить: У вас есть проблема с MooTools. getElements() возвращает всех потомков, а не только непосредственных детей. Попробуйте использовать getChildren().

var drop = function(el){
    el.getParents('ul').reverse().each(function(item){
        var posCount = 1;
        item.getChildren("li").getElements("a span[class=position]").each(function(pos){
                pos.set('text', posCount);
                posCount++;
        });
    });
}

или что-то в этом роде.