CSS. Как выбрать каждый первый, второй, третий и.т.д. элементы списка, таблицы, блока.
Иногда, при работе с CSS нужно выбрать какой-то определенный по счету элемент, например, в списке, таблице и.т.д. Либо нужно выбрать каждый второй, третий и.т.д. элементы.
Давайте рассмотрим способ, как это можно сделать с помощью CSS и псевдокласса nth-child.
Все мои уроки по CSS (каскадным таблицам стилей) здесь.
Для примера возьмем немаркированный список:
- Элемент 1
- Элемент 2
- Элемент 3
- Элемент 4
- Элемент 5
- Элемент 6
- Элемент 7
- Элемент 8
- Элемент 9
- Элемент 10
Давайте выделим красным цветом, например, пятый по счету элемент li. Для этого воспользуемся псевдоклассом CSS nth-child
ul li:nth-child(5)
Для того, чтобы выбрать 5 элемент, в качестве параметра для псевдокласса nth-child, нужно указать цифру 5. Все просто. Цифра 5 это позиция элемента, по порядку, в котором он находится в коде.
Вот какой результат получился.
Вместо цифры «5» можно указывать любое другое число, в зависимости от того элемента, который вы хотите выбрать.
Например, для того, чтобы выбрать каждый второй элемент с помощью CSS, необходимо написать:
ul li:nth-child(2)
Что делать, если нужно выбрать каждый второй элемент с помощью CSS, а не только второй. Как быть в этом случае?
Используйте следуйющий код:
ul li:nth-child(2n)
По сути, добавляем символ «n» к цифре.
Аналогичным образом можно выбирать любые другие элементы, в зависимости от их расположения в дереве (структуре) документа.
Все мои уроки по CSS (каскадным таблицам стилей) здесь.
Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:
JavaScript | Как получить каждый второй элемент массива?
Мы хотим получить из массива каждый второй элемент. Как это сделать?
У нас есть массив:
let massiv = [1,2,3,4,5,6,7,8,9,10];
Мы взяли массив из чисел для простоты восприятия.
Использование метода filter()
Из документации мы знаем, что метод filter() может принимать ДВА параметра. Первый обязательный — это функция обратного вызова, выполнение которой должно приводить к получению логического значения true или false. Её нам будет достаточно.
Эта функция обратного вызова может принимать ТРИ параметра:
- значение элемента
- индекс элемента
- просматриваемый (обходимый) объект
Для решения задачи нам будет достаточно передать первые два параметра. Если быть точнее, то нам нужен только второй параметр, но к сожалению, мы не можем передать только его одного. Индексы любого «нормального» массива начинаются с 0 (нуля) и увеличиваются на 1 для каждого элемента массива.
Это значит, что нам нужны индексы массива под номерами 1, 3, 5, 7 … и так далее.
Решить задачу нам поможет оператор остатка от деления — % , который будет возвращать нам какое-то целое число, которое в последствии будет приведено к логическому типу. Выглядеть это будет так:
let massiv = [1,2,3,4,5,6,7,8,9,10]; massiv.filter((item, index) => index % 2); [2, 4, 6, 8, 10]
Как это работает?
Давайте по шагам посмотрим на преобразования.
Сначала в коллбэк придёт индекс под номером НОЛЬ.
0 % 2
Данное выражение возвращает нам число 0. Наш коллбэк попытается привести НОЛЬ к логическому типу и мы получим false. Метод filter() посмотрит на false и не добавит элемент массива в новый массив. Элемент со значением 1 будет выброшен. Далее ситуация будет чередоваться:
Не трудно догадаться, что подобное чередование остатков от деления всегда будет преобразовываться в чередование true и false. Элемент под индексом 1 будет ВТОРЫМ элементом массива. Индекс 1 вернёт нам остаток от деления в виде числа 1, которое будет преобразовано в true и в результате мы получим второй элемент массива в новый массив. Ситуация будет повторяться до самого конца массива и в итоге мы получим новый массив, который будет состоять только из вторых элементов оригинального массива.
Альтернативное универсальное решение
Если нам нужно будет написать функцию, в которую мы будем передавать нужный нам шаг получения элементов массива, то тогда выражение примет немного иной вид.
Вместе с остатком от деления мы будем использовать отрицание и группировку. Выглядеть это будет так:
let massiv = [1,2,3,4,5,6,7,8,9,10]; massiv.filter((item, index)=>!((index+1)%2));
Функция получения каждых N-ых элементов массива
function everyN (array, n)< return array.filter((item, index)=>!((index+1)%n)); >
Увеличить или уменьшить каждый второй элемент массива PHP
Нужно увеличить или уменьшить каждый второй элемент массива. Нужно чтобы $event обновлялся через раз, то есть для четных элементов чтобы он перезапускал событие.
valueTeam[] = $i; > for ($j = 1; $j valueTeam); $j++) < if ($j % 2 == 0) < if ($event === 1) < $this->valueTeam[$j] += 10; > else < $this->valueTeam[$j] -= 10; > > > print_r($this->valueTeam); > > $obj = new Player(); $event = rand(1,2); $obj->setState($event);
Скрипт выводит следующее
[0] => 1 [1] => 2 [2] => -7 [3] => 4 [4] => -5 [5] => 6 [6] => -3 [7] => 8 [8] => -1 [9] => 10 [10] => 1 [11] => 12 [12] => -10 Или же так, в случае если $event равен 1
[0] => 1 [1] => 2 [2] => 13 [3] => 4 [4] => 15 [5] => 6 [6] => 17 [7] => 8 [8] => 19 [9] => 10 [10] => 21 [11] => 12 [12] => 10 Подскажите как обновлять $event , то есть первый четный элемент к примеру вычитывает значение, а второй четный элемент прибавляет.
Как эффективно выбирать каждый n элемент массива?
Как быстро и эффективно выбирать какждый 5, 10, 12 и тд элемент в массиве? Массив из строк, объектов, чего угодно.
- Вопрос задан более трёх лет назад
- 5651 просмотр
1 комментарий
Простой 1 комментарий
Непонятно что значит «выбирать», вам нужно их сложить в новый массив? Или просто произвести какие-то действия?
Решения вопроса 3
Сергей Соколов @sergiks Куратор тега JavaScript
«Эффективно» в смысле кратко, в одну строку:
const everyNth = (arr, n) => arr.filter((e, i) => i % n === 0); // применение everyNth([0, 11, 22, 33, 44, 55, 66, 77], 7) // [0, 77]«Эффективно» без лишних итераций, старым добрым циклом for() :
function everyNth(arr, n)
Какой быстрее – сделал проверку на jsPerf
Цикл for() быстрее в 7 раз!
Ответ написан более трёх лет назад
Комментировать
Нравится 2 Комментировать
Делай добро и бросай его в воду.
Эффективно — только через создание второго индексного массива. При этом, очевидно, проигрыш по оперативной памяти, но не архи большой. Объекты передаются по ссылке, и строки примерно до 12 символов — тоже по ссылке.
var arr = [1,2,3,4,5,6,7,8,9,10,11,12]; //Исходный массив //Формируем вспомогательный индексный массив var i = 0; var every_5 = arr.filter(e => (++i) % 5 === 0); //Проверяем every_5[0]; //Пятый элемент every_5[1]; //Десятый элементОтвет написан более трёх лет назад
Нравится 1 8 комментариев
Не очень эффективно перебирать весь массив, проверяя индексы, зная точно при этом что от 80 до 99 процентов из них условие не пройдут. Почему бы их просто не вычислить сразу?
Дмитрий, вы правы, но сути это не меняет. А суть в том, что эффективно заранее сформировать второй массив (одноразовое действие), а потом уже можно интенсивно его использовать, избегая операций деления.
Вообще если оптимизировать также и создание второго массива, то здесь еще проблема в том, что исходный массив может быть с дырками. Если это так, то есть 5й элемент не обязательно с индексом 4, то без перебора не обойтись. Иначе да, можно просто индексы вычислять.
dollar, Суть это немного все ж таки меняет, так как скорость будет отличаться в разы, поскольку основные времязатраты в подобных операциях уходят как раз на перебор.
dollar, Также на всякий случай замечу, что filter поставляет в функцию индекс элемента вторым параметром, посему использование дополнительной переменной не обязательно