1

我有一些元素，例如：

<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.

例如，如果我点击 Elem4，什么都不会发生。如果我单击 Elem1，我需要打印 17 和 facebook，它们在两个变量中都不同。

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

4

7 回答 7

4

假设您可以控制 HTML，最好使用 HTMLdata-属性将此信息嵌入到：

<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
});
于 2013-09-25T10:11:42.723 回答
2

使用以选择器结尾 

    $( "div[class$='-dashboard-check']" ).each(function( index ) {
       console.log( index + ": " + $( this ).attr("id") );
    });
于 2013-09-25T10:05:25.763 回答
0

您可以使用 [attribute$=value] CSS 选择器：http ://www.w3schools.com/cssref/sel_attr_end.asp 。类似的东西:[class$=endVal]。

于 2013-09-25T10:08:16.410 回答
0

尝试

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

演示：小提琴

于 2013-09-25T10:18:44.783 回答
0

尝试使用 endswith 属性选择器：

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

IE

$("[class$='-dashboard-check']")
于 2013-09-25T10:06:58.690 回答
0

你需要*=

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

尝试：

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

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

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

于 2013-09-25T10:07:04.917 回答
0 
 <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);
  });
于 2013-09-25T10:37:15.087 回答