如何选择类以GB开头的所有元素？

Question

我有一个项目，我想在其中选择所有具有以下类的元素：
.GB1, .GB2, .GB3, .GB4, .GB5 这将一直持续到.GB400。
我还有其他包含以下类型的元素类.GB, .GBholder, .GB_color, .GB-size，我不想选择这些元素。我没有任何其他以.GB 开头和.GB 之后的元素类，它的编号类似于.GB1 或GB20。所以我有一个想法。但我不知道如何用 jquery 或 javascript 来做到这一点。想法是“我会告诉浏览器，选择所有以.GB 开头和.GB 之后的元素，它有一个或多个数字。”可能吗？我怎样才能通过js或jquery做到这一点？

这是我现在正在尝试的代码：

$('.color').on('click', function() {
    $('*[class^="GB"]').css("background-color","red");
})

我已经用这个类编写了所有的 html 和一些长的 css。所以更改这个类名会花费太多时间。

Answer 1

您可以使用filter() 和isNaN() 方法，如下所示。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="GB1">GB1</div>
<div class="GB2">GB2</div>
<div class="GB3">GB2</div>
<div class="GBholder">GB holder</div>
<div class="GB_color">GB color</div>
<input type="button" value="Click" class="color"/>

<script>
    $('.color').on('click', function () {
        $('[class^="GB"]').filter(function () {
            return isNaN($(this).attr('class').slice(2)) == false;

            //if your elements has more than one class then add GB first and try this
            //var cl = $(this).attr('class').split(' ')[0];
            //return isNaN(cl.slice(2)) == false;
        }).css("background-color", "red");
    })
</script>