如何从给定的字符串开始获取特定类的元素？

Question

我有一个包含多个类的元素列表,例如:

<input class="etape btn-info others">
<input class="etape btn-inverse others">
<input class="etape btn-danger others">

如何编写jQuery代码,这将允许我以下...

$(".etape").click(function(){
   $(this).get("the class that starts with btn-")
   // in order to store this value in a variable to reuse it later 
});

Answer 1

您可以使用正则表达式或split类名.

$(".etape").click(function(){
   var classes = $.grep(this.className.split(" "), function(v, i){
       return v.indexOf('btn') === 0;
   }).join();
});

http://jsfiddle.net/LQPh6/

Answer 2

你也可以尝试:

$(".etape").click(function () {
    var theClass = $(this).attr("class").match(/btn[\w-]*\b/);
    console.log(theClass); 
});

使用匹配而不是grep ...

Answer 3

 // Only select input which have class 
 $('input[class]').click(function(){  
   var myClass;
   // classNames will contain all applied classes
   var classNames = $(this).attr('class').split(/\s+/);  

     // iterate over all class  
     $.each(classNames, function(index, item) {
        // Find class that starts with btn-
        if(item.indexOf("btn-") == 0){
          // Store it
          myClass = item;
        }
     });

  });

现场演示

Answer 4

将这些值存储在data属性中可能更好:

<input class="etape others" data-btntype="info">
<input class="etape others" data-btntype="inverse">
<input class="etape others" data-btntype="danger">

然后:

 $(".etape").click(function(){
     var myBtnType = $(this).data('btntype');
 });

的jsfiddle