一次选择所有具有相同类别和不同编号的元素

Question

我正在尝试选择所有元素，但偶数被设置为一个类，奇数被设置为不同的类，CSS 中只有一行，但我似乎没有成功，例如我有

span#__button1-inner.sapMBtnDefault.sapMBtnHoverable.sapMBtnInner.sapMBtnText.sapMFocusable
span#__button3-inner.sapMBtnDefault.sapMBtnHoverable.sapMBtnInner.sapMBtnText.sapMFocusable


span#__button2-inner.sapMBtnDefault.sapMBtnHoverable.sapMBtnInner.sapMBtnText.sapMFocusable
span#__button4-inner.sapMBtnDefault.sapMBtnHoverable.sapMBtnInner.sapMBtnText.sapMFocusable

有什么办法可以全选，但是奇数和偶数要分开，因为我需要奇数是红色，偶数是蓝色，有点像这样

span#__button(n)-inner.sapMBtnDefault.sapMBtnHoverable.sapMBtnInner.sapMBtnText.sapMFocusable

span#__button(n+1)-inner.sapMBtnDefault.sapMBtnHoverable.sapMBtnInner.sapMBtnText.sapMFocusable

我还有其他元素包含其中一些类，但不仅仅是它们，所以我不想针对所有这些类。 其他元素是这样的

span#__button1-inner.sapMBtnDefault.sapMBtnHoverable.sapMBtnIconFirst.sapMBtnInner.sapMBtnText.sapMFocusable
span#__button2-inner.sapMBtnDefault.sapMBtnHoverable.sapMBtnIconFirst.sapMBtnInner.sapMBtnText.sapMFocusable
span#__button3-inner.sapMBtnDefault.sapMBtnHoverable.sapMBtnIconFirst.sapMBtnInner.sapMBtnText.sapMFocusable

Answer 1

您已经收到了很多 cmets 以及您所提问题的答案，所以我在这里只建议几个替代方案。

前提：您试图在视图呈现后从视图中选择多个元素。假设这是为了更改 CSS 规则或可见性或所选控件。

另一种选择：向您想要（稍后）选择的每个控件添加一些自定义数据。这本身可以通过两种方式完成。一种是使用工厂函数来生成控件。二是手动将自定义数据添加到控件中。当模型数据用作生成控件的基础时，工厂函数将起作用。当在视图上手动创建可管理数量的控件时，可以选择手动添加自定义数据。呈现视图后，您始终可以通过遍历内容并检查自定义数据来选择元素。

优点：该方法将根据您在代码中已有的条件添加自定义数据。这将使它更易于维护。您不必使用 jQuery，您的搜索将使用 JavaScript。您可以进一步调整代码以允许它管理多组自定义数据（以防将来需要） 缺点：您将循环浏览视图的内容，因此较大的视图会导致性能下降。如果您的视图上有非常复杂或大量的控件集，我建议使用其他 cmets 和答案中提到的 jQuery 的属性选择器。

希望对你有所帮助。

Answer 2

我会使用：

span.sapMBtnDefault.sapMBtnHoverable.sapMBtnInner.sapMBtnText.sapMFocusable[id^=__button][id$=-inner]

此选择器通过属性选择器 id^=__button 在开头搜索 __button 来模拟通配符。然后，用 id$= 搜索结尾。

或

如果 id 匹配不重要，只需删除该部分：

span.sapMBtnDefault.sapMBtnHoverable.sapMBtnInner.sapMBtnText.sapMFocusable