Question

我正在尝试使用纯CSS或JQuery选择器在div中选择跨度。 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的spans（paginate_active和5个paginate按钮），单独。

由于我对CSS和jQuery的了解非常有限，我尝试过几件事，但我确信我的语法错误，比如$("paging_full_numbers span:eq(1)")。

你能不能给我一些如何去做的提示？

Answer 1

这个CSS就是你想要的。

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

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个按钮而不循环遍历所有：

spanList.eq(i)

参见jsFiddle：http://jsfiddle.net/t4KWr/

Answer 3

快速获取5个跨度中的第三个将是：

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

Answer 4

似乎

存在问题

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

你应该写像

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

或者如果您正在使用课程

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

Answer 5

此选择范围包含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”类

类的范围

跨度内跨度的CSS或jQuery选择器

5 个答案: