如何检查类，结尾？(How can I check classes that ends with?)

我有一些元素，例如：

<div class="button 17-facebook-dashboard-check">Elem1<div>
<div class="button 18-google-dashboard-check">Elem2<div>
<div class="button 19-twitter-dashboard-check">Elem3<div>
<div class="button">Elem4<div>

并在处理程序：

$('.button').click(function () { });

这里面我处理程序需要做一些特殊的操作，如外推NN和社会对于具有与完成一类的元素-dashboard-check 。

例如，如果我点击Elem4没有什么应该发生。 如果我点击Elem1我需要打印17和Facebook，两者的不同之处在两个变量。

有什么快速的方法来做到这一点jQuery的？ 正则表达式？ .HasClass说的endsWith？

Answer 1:

假设你已经在HTML控件，这将是更最好使用HTML data-属性嵌入此信息为：

<div class="button" data-id="17" data-service="facebook">Elem1</div>
<div class="button" data-id="18" data-service="google">Elem2</div>
<div class="button" data-id="19" data-service="twitter">Elem3</div>
<div class="button">Elem4</div>

它现在很容易写，仅适用于您需要的元素的选择：

$('.button[data-id][data-service]').click(...);

而且也很容易得到你需要点击的信息：

$('.button[data-id][data-service]').click(function() {
    alert($(this).attr("data-id"));           // with jQuery
    alert(this.getAttribute("data-service")); // without jQuery
});

Answer 2:

使用与选择结束

    $( "div[class$='-dashboard-check']" ).each(function( index ) {
       console.log( index + ": " + $( this ).attr("id") );
    });

Answer 3:

尝试使用的endsWith属性选择：

$("[attribute$='value']")

即

$("[class$='-dashboard-check']")

Answer 4:

你需要*=

说明：选择具有与包含一个给定的子串的值指定的属性的元素。

尝试：

$( "div[class*='-dashboard-check']" )

$ =检查字符串结尾
* =检查字符串包含

这是属性选择器的完整列表

Answer 5:

您可以使用[属性$ =值] CSS选择器： http://www.w3schools.com/cssref/sel_attr_end.asp 。 喜欢的东西:[class$=endVal]

Answer 6:

尝试

(function () {
    $.fn.hasClassEndsWith = function (suffix) {
        if (this.length === 0) {
            return false;
        }

        var clazz = this.attr('class');
        if (clazz === undefined) {
            return false;
        }

        var classes = clazz.split(' ');
        var regex = new RegExp(suffix + '$', 'i');
        for (var i = 0; i < classes.length; i++) {
            if (regex.test(classes[i])) {
                return true;
            }
        }
        return false;

    };
})(jQuery);

jQuery(function () {
    $('.button').click(function () {
        if ($(this).hasClassEndsWith('dashboard-check')) {
            console.log('dashboard')
        } else {
            console.log('normal')
        }
    });
})

演示： 小提琴

Answer 7:

 <div class="button 17-facebook-dashboard-check">Elem1</div>
 <div class="button 18-google-dashboard-check">Elem2</div>
 <div class="button 19-twitter-dashboard-check">Elem3</div>
 <div class="button">Elem4</div>

尝试这个：

 $( "div[class$='-dashboard-check']" ).click(function (e) {
    var o = $(e.target)
    var str = o.attr('class');
    var s1 = str.substring(7,9);
    var s2 = str.substr(10,str.indexOf('-'));
    alert(s1+" "+s2);
  });

文章来源: How can I check classes that ends with?