Альтернатива nth-child для старых браузеров IE

Есть ли альтернатива таргетингу элементов с помощью nth-child() для старых браузеров IE?

Javascript (не jquery) также будет достаточно.

РЕДАКТИРОВАТЬ: дополнительные библиотеки не могут быть добавлены на страницу.


person Anthony Miller    schedule 04.01.2012    source источник


Ответы (4)


Вы можете использовать селектор jQuery :nth-child();

$("li:nth-child(even)") // target even li's
$("li:nth-child(odd)") // target odd li's
$("li:nth-child(5n)") // target the fifth li
person Andres Ilich    schedule 04.01.2012
comment
В случае отсутствия jquery есть ли простое решение для javascript? - person Anthony Miller; 05.01.2012
comment
нет реализации :nth-child в простом javascript, что вы можете сделать, так это в случае отсутствия поддержки jQuery проявить творческий подход с помощью css, например в этом случае или [в этом](pbdh.com/open-house/entry/poor-mans-nth-type] другое , Современные решения для старых браузеров трудно найти, и они полагаются на хаки, чтобы работать, и каждый случай индивидуален, поэтому единственное верное решение вы, вероятно, не найдете. - person Andres Ilich; 05.01.2012
comment
на данный момент будет достаточно n-го ребенка бедняка. Спасибо за ссылку =D - person Anthony Miller; 07.01.2012

немного хреново, но можно

ul > li {} /* first-child, overwritten by below */
ul > li + li {} /* second-child, overwritten by below, etc */
ul > li + li + li {}
ul > li + li + li + li {}

Повторяйте по мере необходимости.

person WraithKenny    schedule 23.04.2013
comment
этот хорошо работал для меня - я использовал 1-го, 2-го и 3-го ребенка, так что это было не так уж ужасно. - person caitriona; 16.07.2013
comment
Люблю этот ответ, так как он требует только CSS, который изначально понимает IE. - person NoobsArePeople2; 13.06.2014

Есть Selectivizr: http://selectivizr.com/

:nth-child поддерживается во всех фреймворках JavaScript, которые с ним работают, включая jQuery.

Большим преимуществом использования этого является то, что он читает непосредственно из ваших файлов CSS, а не пишет дополнительный javascript (это ненавязчиво). Вы можете просто использовать расширенные селекторы как обычно.

person Wesley Murch    schedule 04.01.2012
comment
Это звучит довольно круто. Я сохраню это как ссылку для своих собственных сайтов. - person Anthony Miller; 05.01.2012
comment
Я всегда заканчиваю тем, что использую CSS2 :( Я должен поддерживать IE7, и ни одно из известных мне решений не может хорошо справиться с новыми элементами, которые добавляются в DOM (например, AJAX) после загрузки патча js и анализирует CSS. Даже решение jquery в другом ответе не может справиться с этим, если вы не используете плагин livequery или что-то подобное для повторного вызова этих функций при обновлении страницы. Если вы не добавляете новые элементы на страницу, это не проблема, но для меня это огромный минус. - person Wesley Murch; 05.01.2012

Вы можете использовать полифилл IE9.js: http://ie7-js.googlecode.com/svn/test/index.html.

person Matt Ball    schedule 04.01.2012
comment
IEX.js довольно мощен, но это чудовище. У меня на самом деле было больше проблем, связанных с его использованием. - person Wesley Murch; 05.01.2012
comment
IEX.js остановил работу Respond.js. Так что будьте осторожны, если вы создаете адаптивный сайт, который должен поддерживать IE8 и ниже. - person Dil A; 21.02.2014