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

Posted 2023-05-09

【中文标题】如何选择类以GB开头的所有元素？

【英文标题】：How to select all the elements which class starts with GB?

【发布时间】：2016-06-14 00:13:39

【问题描述】：

我有一个项目，我想在其中选择所有具有以下类的元素：.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。所以更改这个类名会花费太多时间。

【问题讨论】：

虽然这是可能的，但代码会很丑陋且性能不佳。如果可能的话，最好很多修改你的 HTML 来为你想要直接选择的元素添加一个类。

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

这对我有用：jsfiddle.net/1y6dpLzk

您的网站将难以维护。顺便说一句，您的标题问题与您的预期行为相当误导，您只是不想要您的标题所要求的......

感谢@A. Wolff 的评论。实际上，我没有为这个问题找到任何其他标题。请随时更正标题。或建议我改变它。 :)

【参考方案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>

【讨论】：

作为注释：$(this).attr('class') 完全是浪费。 this.className 将包含此示例中的相同信息，并且不需要您使用 jQuery 重新包装。

我给了你功劳，但 <div class="GB "> 会失败，isNaN() 应该替换为 Number.isNan() 编辑：实际上没有......

感谢您的建议。 this.className 更好，但$(this).attr('class') 并非完全浪费。 @rlemon

这很浪费，它用更多的工作做同样的事情......这很浪费。

@rlemon 一些开发人员喜欢保持编码语法一致，这意味着使用适当的库方法，而不是混合它。但在这种情况下，它确实并不重要