Селектор 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, которые являются дочерними не только непосредственных детей
  • #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++;
    });
}
52
css css-selectors javascript mootools

2 ответов

ul > li

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

#parent > li

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

общее решение для обратной совместимости сделать что-то вроде этого:

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

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

Edit: Ok у вас есть конкретная проблема 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++;
        });
    });
}

или что-то подобное.

85

на первоначальный вопрос не было ответа. : only-child работает только в том случае, если у единственного ребенка нет детей-потомков. Первоначальный пост предположил, что включение детей-потомков было связано с ul>li, тогда как на самом деле это связано с ошибкой в :only-child. Парадоксально :первый ребенок выбирает первого ребенка в списке с потомками, как это делает последний ребенок, но :только ребенок не делает. Я проверил это в Firefox, Opera и Chrome. Вот пример:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8">
<style>
.list>ul>li:only-child {color:red}
.list>ul>li:first-child {color:green}
.list>ul>li:last-child {color:blue}
</style>
</head>
<body>
<div class="list">
<ul><li>Item one</li><ul>
<l>Subitem one</li>
<li>Subitem two</li></ul></li><!--<li>Item two</li>
<li>Item three</li>-->
</ul></div>
</body></html>

активировать : first-child и: last-child правила раскомментируйте последние два элемента. Реализация селекторы уровня 3 стандарта таким образом, непоследователен в основных браузерах. Правило: первый ребенок не должно быть активировано, когда есть правило: только ребенок и уникальный ребенок имеет потомков. В Примере единственный ребенок должен быть красным, но он зеленый.

0