Question

我在页面上有一堆div（ bg_1，bg_5，bg_112 等），我想为其分配样式“ display：inline-block”。

但是，我不想将其他样式分配给 bg_1_log，bg_5_log，bg_112_log 等。）

我尝试过：

 $('[id^=bg_]').attr('style','display:inline-block');

这可行，但是当然可以将样式分配给所有以' bg _ '开头的div，包括 bg_112_log ...

如何为所有仅bg_ + number的div分配样式？

我正在使用jQuery，所以使用JS还是可以的。

Answer 1

您可以使用not和attribute contains selector来使用选择器，例如：

$('[id^=bg_]').not('[id*=_log]')

或者，您也可以按照@zfrisch的建议使用正则表达式，但这是一个改进的版本（选择器不仅限于div）：

$('*').filter(function() { return this.id.match(/bg_\d$/) })

或者，甚至像：

$('*').attr('id').match(/bg_\d$/)

Answer 2

您可以使用JQuery的.filter方法

$('div')
    .filter(function() {
        return this.id.match(/bg_\d$/);
    })
    .css("backgroundColor", "green");

div:after {
  content: "test";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="bg_1"></div>
<div id="bg_2"></div>
<div id="bg_3"></div>
<div id="bg_4"></div>
<div id="bg_5"></div>
<div id="bg_6"></div>
<div id="bg_1_log"></div>
<div id="bg_2_log"></div>
<div id="bg_3_log"></div>
<div id="bg_4_log"></div>
<div id="bg_5_log"></div>
<div id="bg_6_log"></div>

或者作为另一个答案指出.not

Answer 3

如果您不想选择ID以_log结尾的元素，则可以使用以下代码：

$('[id^=bg_]').not('[id$=_log]').attr('style','display:inline-block');

我可以使用哪个选择器来排除带后缀的ID？

3 个答案: