使用单个 css 选择器选择多个 div ID答案

【问题标题】：Select multiple div IDs using a single css selector使用单个 css 选择器选择多个 div ID
【发布时间】：2012-10-07 06:03:33
【问题描述】：

我很少有相同的潜水，但它们有不同的 div ID。有没有办法使用某种选择器将 CSS 样式应用于所有 div ID，即跨浏览器兼容？我的 HTML 看起来像这样

<div id="field_0_dd"></div>
<div id="field_1_dd"></div>
<div id="field_2_dd"></div>
<div id="field_3_dd"></div>
<div id="field_4_dd"></div>
<div id="field_5_dd"></div>

谢谢大家:)

【问题讨论】：

给这些 div 一个通用类，这就是它们的用途。

标签： jquery css

【解决方案1】：

您可以使用属性选择器（^= 是 starts with 选择器，$= 是 ends with 选择器）：

$('div[id^="field_"][id$="_dd"]')

虽然拥有这么多唯一 ID 很难管理。也给他们上课。

【讨论】：

我一直想知道，除了额外的字符空间之外，在您的字符串中使用" 是否有任何影响？我的意思是......在某些服务器端语言中，它会逃避解释器。只是好奇，以为你会知道
@Ohgodwhy：老实说，我不知道。我只是把它们放了，因为它看起来很酷。据我记得，jQuery 文档总是将它们放在示例中，所以我认为这是“正确”的做法。我现在就看源代码。
@Ohgodwhy：看起来 jQuery 需要引号：github.com/jquery/sizzle/blob/master/sizzle.js#L1651
确实如此。感谢您抽出宝贵时间。
@Ohgodwhy：没问题，我自己也很好奇。

【解决方案2】：

如果您正在寻找一个与正则表达式匹配的 CSS 选择器，那么我认为您无法以跨浏览器兼容的方式获得它（尽管 CSS2 Attribute Selectors with Regex 允许您选择，例如所有内容 以field_ 开头。IE 不支持

不过，jQuery 有过滤功能，使用它可以轻松完成：

$('div')
    .filter(function() {
        return this.id.match(/field_\d+dd/);
    })
    .html("Matched!")
;

【讨论】：

【解决方案3】：

只给他们上相同的课！

<div class="common-class" id="field_0_dd"></div>
<div class="common-class" id="field_1_dd"></div>
<div class="common-class" id="field_2_dd"></div>
<div class="common-class" id="field_3_dd"></div>
<div class="common-class" id="field_4_dd"></div>
<div class="common-class" id="field_5_dd"></div>


.common-class{background:green;margin:auto;etc}

【讨论】：

【解决方案4】：

可以

或下面的其他几个。

希望它符合原因:)

代码

$(document).ready(function() {
   $('div').css('color','green');

});

【讨论】：

【解决方案5】：

The starts with selector.

$('div[id^=field_]')

【讨论】：

【解决方案6】：

添加一个class，然后选择它。

例如class = "dummy"

在 jquery 中

$('.dummy') ...任何你想要的，例如$('.dummy').css('color','red')

【讨论】：

【解决方案7】：

$('div[id^="field"]').addClass('styleyouwant');

在你的 CSS 中

.styleyouwant{

/**styles here**/
}

【讨论】：