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

Posted 2023-03-06

【中文标题】跨度内跨度的 CSS 或 jQuery 选择器

【英文标题】：CSS or jQuery Selector for span within span

【发布时间】：2011-11-16 00:15:57

【问题描述】：

我正在尝试使用纯 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 的跨度（paginate_active 和 5 个分页按钮），单独选择。

由于我对 CSS 和 jQuery 的了解非常有限，我尝试了一些方法，但我确信我的语法是错误的，例如 $("paging_full_numbers span:eq(1)") 。

你能告诉我如何去做吗？

【问题讨论】：

SPAN 嵌套在 SPAN 内是否有效（按规范）？

我不确定，但这可能来自 jQuery 插件（数据表）并且（即使我可以）我不想更改生成它的源代码，因为我想要以保持与未来版本的兼容性。

有一个快速的 google，是的，SPAN 包含 SPAN 等内联元素是有效的。

@pst：当然可以。我想不出有什么理由不这样做。

【参考方案1】：

要单独选择它们，您可以简单地选择它们，然后使用 jQuerys .each()。例如

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

将找到所有在 id=example2_paginate 元素中的“paginate_active”或“paginate_button”类。然后你可以写：

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

或者选择第 i^th 个按钮而不循环它们：

spanList.eq(i)

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

【讨论】：

谢谢。有没有办法直接选择一个元素（比如上面带有'3'的span）而不必将它放入变量/循环中？

是的，spanList.eq(3) 应该这样做 - 即使没有“每个”功能，您也可以使用它。如果您想对每个事件依次执行某些操作，“each”函数非常方便。

strabge，它似乎无法找到那些 - 我尝试了其他一些东西，即使是简单的 $(".paginate_active") 也不会返回任何东西！必须与不喜欢嵌套跨度的 DOM 解析器有关，否则我是一个 javascript 新手！ :)

如果我这样做： $("span").css("border","3px solid red");那么它只会在 1-5 左右的外部跨度上设置边框，而不是单独为它们设置边框。换句话说，它不将它们视为跨度？！

这也找不到内部跨度：$("body").find("span").css("border","3px solid red");

【参考方案2】：

这个 CSS 就是你想要的。

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

【参考方案3】：

例如，获得 5 个跨度中的第三个的快速方法是：

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

【讨论】：

谢谢，这似乎也不起作用，似乎我在@Stephen Harris 上面回答的 cmets - 似乎是嵌套跨度的问题？

是的也可以在这里工作：jsfiddle.net/uDRhr/5 但在实际页面/浏览器上不起作用！

我忘了提到上面的 html sn-p 在页面内的其他一些元素（div、tbody 等）中，但它不应该有任何区别，我的示例应该仍然有效！跨度>

【参考方案4】：

好像有问题

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

你应该这样写

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

或者如果你正在使用类

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

【参考方案5】：

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

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

选择只有类'paginate_active'或只有类'paginate_button'的跨度

【讨论】：

是的，试过了，没用，请检查 cmets 上 Stephen Harris 和 peirix 的回答

但是你想要改变，在这种情况下，css 样式，在所有跨度中？还是只有那些只有“paginate_active”或“paginate_button”类的？因为我上面所说的正是您想要的（分别选择包含 1 到 5（paginate_active 和 5 个分页按钮）的跨度）。

我只想访问 paginate_* 跨度，你是对的。我给出的代码示例（带有 css 边框）是为了说明问题。奇怪的是，它在 jsFiddle 等上运行良好，但在浏览器中却不行。