CSS или jQuery Selector для диапазона в пределах диапазона

Question

Я пытаюсь выбрать промежуток внутри промежутка внутри div, используя обычные селекторы CSS или JQuery. HTML-код выглядит следующим образом:

<div id="example2_paginate" class="dataTables_paginate paging_full_numbers">
<span id="example2_first" class="first paginate_button paginate_button_disabled">First</span>
<span id="example2_previous" class="previous paginate_button paginate_button_disabled">Previous</span>
<span>
<span class="paginate_active">1</span>
<span class="paginate_button">2</span>
<span class="paginate_button">3</span>
<span class="paginate_button">4</span>
<span class="paginate_button">5</span>
</span>
<span id="example2_next" class="next paginate_button">Next</span>
<span id="example2_last" class="last paginate_button">Last</span>
</div>

Я хочу выбрать пролеты, содержащие от 1 до 5 (paginate_active и 5 кнопок paginate), по отдельности.

С моим очень ограниченным знанием CSS и jQuery я попробовал пару вещей, но я уверен, что мой синтаксис неправильный, как $("paging_full_numbers span:eq(1)").

Не могли бы вы дать мне подсказку, как это сделать?

Answer 1

Быстрый способ получить, скажем, третий из 5 диапазонов:

$(".paging_full_numbers > span > span:nth-child(3)")

Answer 2

Чтобы выбрать их по отдельности, вы можете просто выбрать их все, а затем использовать jQuerys .each(). Например

spanList = $('#example2_paginate').find('.paginate_active, .paginate_button');

найдет все классы 'paginate_active' или 'paginate_button', которые находятся внутри вашего элемента id = example2_paginate. Тогда вы можете написать:

 spanList.each(function(index){
    <-- code here for occurence of index index-->
});

В качестве альтернативы, чтобы выбрать i ^ th кнопку, не просматривая их все:

spanList.eq(i)

См. JsFiddle: http://jsfiddle.net/t4KWr/

Answer 3

Этот CSS - то, что вы хотите.

div.paging_full_numbers > span > span.paginate_active, div.paging_full_numbers > span > span.paginate_button

Answer 4

Это отдельные диапазоны, содержащие от 1 до 5 (paginate_active и 5 кнопок paginate), по отдельности:

$("div.paging_full_numbers span:[class='paginate_active'],[class='paginate_button']").each(function(){
    //do what you want here
});

, которые выбирают диапазоны только с классом 'paginate_active' или только с классом 'paginate_button'

Answer 5

кажется, что есть проблема с

$("paging_full_numbers span:eq(1)")

Вы должны написать как

$("#paging_full_numbers span:eq(1)")

Или, если вы используете класс

 $(".paging_full_numbers span:eq(1)")