是否有可能找回匹配jQuery中的部分选择器的值？

Question

我编写了一个可以工作的函数，但这很丑陋。我敢肯定有一个更好的方式做我想做的，它可能变成了非常难看，因为我不是在JavaScript真的很好：d

我有可能有一类叫做view-in-box或view-in-box-640-480一些HTML元素。如果该类只是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混淆了我！ 谢谢。

Answer 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的价值。

Answer 2

是的，这是可能的：

• Filtering a selection - option 1
• Regex selector website - option 2
• Regex selector thread - options

不过，我会建议Mathias解决方案。

Answer 3

正则表达式可用于简化您的代码;可以使用正则表达式替换JavaScript字符串功能（分割，的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