Как выбрать четные или нечетные элементы на основе имени класса

Question

если вы создаете HTML-макет, как это

<ul>
     <li class='a'></li>
     <li class='b'></li>
     <li class='a'></li>
     <li class='b'></li>
     <li class='a'></li>
     <li class='b'></li>
     <li class='a'></li>
     <li class='b'></li>
</ul>

и попытайтесь выбрать нечетные элементы с помощью класса 'a', например, $$ ('. A: odd') вы получите пустой массив, а если вы сделаете $$ ('. A: even'), вы получите все четыре элемента li с классом 'a'. Это действительно странно .. Но я новичок в mootools, может быть, я делаю что-то не так ..

Так что мой вопрос в том, как выбрать первый и третий элементы li с помощью класса. Я знаю, что могу сделать это с помощью функции

$$ ('. A'). Filter (функция (элемент, индекс) {возвращаемый индекс% 2;}

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

Answer 1

Проблема в том, что: odd и: even (и их двоюродные братья CSS: nth-child (odd) и: nth-child (even)) относятся к порядку, в котором элементы отображаются как дочерние элементы своих родителей, а не дети с этим конкретным селектором.

Это сработало для меня (Prototype, но похоже, что MooTools имеет похожий синтаксис):

var odd = $$('.a').filter(function(item, index) {
    return index % 2 == 0;
});
var even = $$('.a').filter(function(item, index) {
    return index % 2 == 1;
});

Редактировать: кажется, вы уже рассмотрели этот вопрос в вопросе, просите меня ответить, прежде чем читать полностью.

Answer 2

Псевдоселектор: nth-child просматривает индекс (ненулевого индексации) элемента DOM , а не внутри выбранных (соответствующих) элементов. MooTools добавил селектор ': odd' , чтобы выбрать «реальные» нечетные элементы, поэтому индекс начинается с 0.

Так что в вашем примере, выбор «.a: nth-child (odd)» вернет все элементы li.a, потому что индекс начинается с 1. Выбор «.a: odd» ничего не выбирает, потому что нет « реальные 'нечетные элементы li.a.

Что вам, вероятно, нужно, это выбрать элемент ': nth-of-type' . Поэтому выбор «.a: nth-of-type (odd)» вернет все нечетные элементы li.a (первый и третий - он использует индекс элемента DOM).

MooTools не поддерживает селектор ': nth-of-type' по умолчанию, но вы можете расширить механизм селектора, используя класс Selectors.Pseudo (сейчас не могу найти пример).

Answer 3

отсутствие век , так вы говорите, что это не ошибка? Это так и должно работать?

Answer 4

Если вы пытаетесь получить 1-е и 3-е место, вам просто нужно $$ ('. A').

Вы пытаетесь получить 1-й и 5-й предметы? Это было бы что-то вроде $$ ('a: nth-child (4n + 1))

Я предполагаю, что mootools использует css3 Структурные псевдоклассы