Question

我有一些元素，例如：

<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 () { });

在这个处理程序中，我需要做一些特殊操作，例如为具有-dashboard-check完成的类的元素推断NN和SOCIAL。

例如，如果我点击Elem4，就不会发生任何事情。如果我点击Elem1我需要打印17和facebook，两个变量都不同。

在jquery上执行此操作的快速方法是什么？正则表达式？ .HasClass结尾？

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

使用ends with selector

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

Answer 3

尝试使用endswith属性选择器：

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

即

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

Answer 4

you need *=

描述：选择具有指定属性的元素，其值包含给定的子字符串。

尝试：

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

$= check string ends with
*= check string contains

Here is full list of attribute selector

Answer 5

您可以使用[attribute $ = value] 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')
        }
    });
})

演示：Fiddle

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);
  });

如何查看以？结尾的课程？

7 个答案: