Как применить стиль к N-ному экземпляру класса и найти путем косвенного наследования - CSS Jquery

Question

Жесткий здесь!

Я создаю шаблон блоггера, и клиент хочет, чтобы различные цвета применялись к заголовкам в правом столбце шаблона.

Проблема в том,У меня мало контроля над сгенерированным html, так как он контролируется движком блоггера.

Я хочу иметь возможность:

Выбрать N-й экземпляр элемента h2 с классом'title' и примените стиль CSS, используя Jquery.

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

Я безуспешно пробовал следующий код- попытка использовать CSS-селектор косвенной отмены:

$(document).ready(function () {

            alert('test');

            $("#RightColContent S+ h2.title:nth-child(2)").css('background-color', 'green');
            $("#RightColContent S+ h2.title:nth-child(3)").css('background-color', 'red');
        });

Этот код применил стиль, но ко всем элементам, вероятно, потому что я не предоставил родительский элемент:

$("h2.title:nth-child(1)").css('background-color', 'green');

Пожалуйста, посмотрите изображение проверки html в firebog, чтобы увидеть поток html.

альтернативный текст http://bombdefused.com/firebug.png

Престижность любому, кто может помочь мне с этим.

Answer 1

используйте эквалайзер, как, например,

$('h2.title:eq(4)')    //selects the 5th element in the selection

Answer 2

используйте : eq
$('h2.title:eq('+i+')');
или : nth-of-type
$('h2.title:nth-of-type('+i+1+')');
или даже что-то вроде просто как:
$($('h2.title')[i]);
, где $('h2.title')[i] - это элемент JavaScript и $($('h2.title')[i]) a jQuery Элемент .

Answer 3

Вы также можете загрузить каждый h2, а затем применить цвета, используя jquery.each:

$('#RightColContent h2.title').each(function(index) {
    //apply your different css classes to each item
    $(this).addclass('title' + index);
  });

В вашем CSS вы должны создать правило для каждого класса индекса:

.title1 { color: red;}
.title2 { color: blue;}
.title3 { color: green;}

Answer 4

Что я хочу сделать, это:

Выберите N-й экземпляр элемента h2 с классом 'title' и примените стиль css с помощью Jquery.

$('h2.title:eq(N-1)').css('property', 'value');

http://api.jquery.com/eq-selector/

или

$('h2.title').eq(N-1).css('property', 'value');

http://api.jquery.com/eq/

Answer 5

Это должно работать:

$("h2.title:eq(n)")

Он выбирает все h2, имеющие заголовок класса, а затем возвращает n-й элемент из этого списка.Помните, что eq проиндексирован на 0, так что вы действительно должны поставить n-1, чтобы получить n-й элемент выше.

См. простой пример .