是否可以取回与 jQuery 中的部分选择器匹配的值？答案

【问题标题】：Is it possible to get back the value that matched a partial selector in jQuery?是否可以取回与 jQuery 中的部分选择器匹配的值？
【发布时间】：2012-02-12 03:58:05
【问题描述】：

我编写了一个可以工作但很难看的函数。我很确定有更好的方法来做我想做的事，结果可能很丑，因为我在 javascript 方面不是很好：D

我有一些 html 元素可能有一个名为 view-in-box 或 view-in-box-640-480 的类。如果类只是view-in-box，则会出现一个对话框，其中包含一些默认宽度和高度，否则它将显示类名中指定的宽度和高度。

html 元素类可以是：class='note comment ui-button view-in-box-300-200 footer star'。

到目前为止，我所做的是选择其中包含 view-in-box 的所有元素：

$('body').delegate('[class*=view-in-box]','click', function(){

然后我获取整个类属性并循环它以检查是否可以找到view-in-box。这是（简化的）代码：

$('body').delegate('[class*=view-in-box]','click', function(){
    ...
    var class_array = $(this).attr('class').split(" ");
    for (var i = 0; i < class_array.length; i++) {
        if (class_array[i].search('view-in-box-') != -1) {
            box_text = class_array[i];
            break;
        }
    }

    if (box_text !== null) {
        box_array = box_text.split('-');
        ....
    }

    ....
    return false;
});

所以我想知道，有没有办法直接返回我的函数中匹配 view-in-box 谓词的内容？例如view-in-box 或view-in-box-233-455。还是我真的必须获取完整的类属性并拆分它。

希望我很清楚，javascript 让我感到困惑！谢谢。

【问题讨论】：

可以使用jquery的hasClass方法
hasClass 可以采用带有'*'的模式？！而且我仍然需要获取这些宽度和高度值。
hasClass 不太合适。您必须知道类的名称，因为它不支持通配符，而且无论如何，它不返回类名，只是一个布尔值。问题是，为什么不通过 css 类本身应用宽度/高度？
因为我需要为我可能需要的所有宽度/高度创建很多 css 类，对吗？当我添加新的宽度/高度时，甚至必须记住创建类。使用我的方法，您只需发送所需的任何内容，对话框就会动态获得正确的大小。或者我很笨，我错过了一些明显的东西？喜欢动态css？ :D

标签： jquery html css-selectors jquery-selectors

【解决方案1】：

您应该使用自定义 data-* 属性而不是类名来存储此数据。

所以而不是：

<div class="note comment ui-button view-in-box-300-200 footer star"></div>

帮自己一个忙并使用：

<div class="note comment ui-button view-in-box footer star" data-size="300-200"></div>

然后你可以使用$(el).data('size') 来使用jQuery 获取值。

【讨论】：

另外，我建议使用data-height 和data-width 而不是data-size。
@falsarella 如果您需要单独的值，一定要！
哦。这很好。非常感谢！

【解决方案2】：

是的，有可能：

但是，我会推荐Mathias 解决方案。

【讨论】：

感谢您的链接！是的，我认为 Mathias 解决方案更适合这种情况，但我敢肯定，您的链接在其他一些情况下也会很有用。

【解决方案3】：

可以使用正则表达式来简化您的代码；您可以用正则表达式替换 JavaScript 字符串函数（split、indexOf、搜索等）：

/(?:^|\s)view-in-box(-\S+)?(?:\s|$)/;

// (?:^|\s) -- non-capturing group that matches beginning of string or white-space
// (-\S+)?  -- optional capturing group that match hyphen + one or more non-white-space characters
// (?:\s|$) -- non-capturing group that matches end of string or white-space

例子：

var rx = /(?:^|\s)view-in-box(-\S+)?(?:\s|$)/;
rx.exec("view-in-box");                                            // ["view-in-box", undefined]
rx.exec("view-in-box-foobar ");                                    // ["view-in-box-foobar ", "-foobar"]
rx.exec("view-in-box-foo-bar");                                    // ["view-in-box-foo-bar", "-foo-bar"]
rx.exec("note comment ui-button view-in-box-300-200 footer star"); // [" view-in-box-300-200 ", "-300-200"]
rx.exec("view-in-boxXXXX");                                        // null
rx.exec("XXXXview-in-box");                                        // null
rx.exec("XXXX-view-in-box");                                       // null

【讨论】：