Javascript span中span的CSS或jQuery选择器

我正在尝试使用纯CSS或JQuery选择器在div中的span中选择span。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个分页按钮和5个分页按钮的跨距

由于我对CSS和jQuery的了解非常有限，我尝试了一些方法，但我确信我的语法是错误的，比如$paging_full_numbers span:eq1

---

你能告诉我怎么做吗？

这件事似乎有问题

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

你应该这样写

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

或者如果您正在使用类

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

---

此选择范围分别包含1到5个分页按钮和5个分页按钮：

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

---

选择仅具有类“paginate_active”或仅具有类“paginate_button”的范围

此CSS就是您想要的

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

---

要单独选择它们，只需将它们全部选择，然后使用jQuerys.each。比如说

span列表=$'example2_分页'.find'.paginate_active，.paginate_按钮'

将找到id=example2\u paginate元素中的所有“paginate\u active”或“paginate\u button”类。然后你可以写：

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

---

请参见JSFIDLE:

一种快速获得5个跨度中第三个跨度的方法是：

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

---

按照规范，将一个SPAN嵌套在SPAN中是否有效？我不确定，但这可能来自jQuery插件datatables，即使可以，我也不想更改生成它的源代码，因为我想保持与未来版本的兼容性，span包含span之类的内联元素是有效的。@pst:当然可以。我想不出有什么理由不去。谢谢。有没有一种方法可以直接选择一个元素，比如上面带有“3”的span，而不必将其放入变量/循环中？是的，spanList.eq3应该可以做到这一点-即使没有“each”函数，您也可以使用它。如果您想依次对每个事件执行某些操作，“each”函数非常方便。strabge，它似乎无法找到这些操作-我尝试了其他一些操作，即使是简单的$。paginate\u active也不会返回任何内容！一定是因为DOM解析器不喜欢嵌套跨距，否则我就是一个javascript新手如果我这样做：$span.cssborder，3倍纯红；然后，它将只在1-5左右的外部跨度上设置边界，而不会单独为它们设置边界。换句话说，它不认为它们是跨越式的吗？此外，这也找不到内部跨距：$body.findspan.cssborder，3px实心红色；谢谢，这似乎也不起作用，我在上面对@Stephen Harris answer的评论-似乎是嵌套跨距的问题？是的，在这里也起作用：但在实际的页面/浏览器上不起作用！我忘了提到上面的html代码片段在页面中的其他几个元素div、tbody等中，但它不应该有任何区别，我的示例应该仍然有效！是的，试过了，没用，请检查斯蒂芬·哈里斯和佩里克斯对答案的评论，但是你想改变，在这个例子中，css风格，在所有的span中？或者只有那些只有类“paginate_active”或“paginate_button”的？因为我上面所说的正是您想要的选择范围，其中包含1到5个paginate_活动和5个paginate按钮。我只想访问paginate_*范围，您是正确的。我给出的css边框代码示例就是为了说明这个问题。奇怪的是，它在JSFIDLE等上运行良好，但在浏览器中却不行。

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