Селектор 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, которые принадлежат в списке, а не принадлежат к подспискам. Предположим, что за исключением идентификатора, позиции и текста, каждый элемент 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++;
    });
}
2 52
javascript css mootools css-selectors

2 ответа:

ul > li

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

#parent > li

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

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

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

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

Edit: Ок у вас есть конкретный вопрос 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

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

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

0