2012-01-04 6 views
4

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

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

EDIT: данные дополнительных библиотек не могут быть добавлены на страницу.

ответ

6

Вы можете использовать селектор jQuery's :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 
+0

В случае отсутствия jquery существует ли простое решение для javascript? – Mechaflash

+0

нет: реализация nth-child в простом javascript, то, что вы можете сделать, в случае, если поддержка jQuery не создается с помощью css, например [this] (http://abouthalf.com/2011/07/06/bad-mans-nth-child-selector-for-ie-7-and-8 /) или [это] (http://www.pbdh.com/open-house/entry/poor-mans-nth- типа]. Современные решения для старых браузеров трудно найти и полагаться на хаки для работы, и каждый случай отличается, поэтому одно истинное решение, которое вы, вероятно, не найдете. –

+0

n-й ребенок бедного человека будет достаточно Спасибо за ссылку = D – Mechaflash

4

Существует Selectivizr: http://selectivizr.com/

:nth-child поддерживается в каждом яваскрипта рамках, которая работает с ним, в том числе JQuery.

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

+0

Это звучит довольно круто. Я буду хранить это как ссылку для своих сайтов. – Mechaflash

+0

Я всегда просто использую CSS2 :(Мне нужно поддерживать IE7, и ни одно из решений, которые находятся там, могут хорошо справиться с новыми элементами, добавленными в DOM (думаю, AJAX), после того, как js-патч загружает и анализирует CSS. Даже решение jquery в oth er ответ не может справиться с этим, если вы не используете плагин livequery или что-то подобное, чтобы снова вызвать эти функции при обновлении страницы. Если вы не добавляете на страницу новые элементы, это не проблема, но для меня это большой разбойник. –

1

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

+3

IEX.js довольно мощный, но это * зверь *. У меня на самом деле появилось больше проблем с его использованием. –

+1

IEX.js остановлен Respond.js от работы. Поэтому следите за тем, чтобы ваше здание реагировало на сайт, который должен поддерживать IE8 и ниже. –

16

она сосет немного, но вы можете

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 {} 

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

+0

этот работал хорошо для меня - я использовал 1-го, 2-го и 3-го детей, так что это было не слишком ужасно. – caitriona

+0

Люблю этот ответ, так как он требует только CSS, который ИИ изначально понимает. – NoobsArePeople2

+0

хорошо ответ. сэкономленное время. +1 – Miron

Смежные вопросы