34

複数のクラスを持つ要素のリストがあります。次に例を示します。

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

11 に答える 11

21

あなたも試すことができます：

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

grep の代わりに match を使用します...

于 2013-03-19T17:34:00.103 に答える
8 
 // 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;
        }
     });

  });

ライブデモ

于 2013-03-19T16:57:54.873 に答える
6

It would probably be better to store those values in the data attribute: 

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

Then:

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

jsFiddle

于 2013-03-19T17:00:17.317 に答える
2

btn を独自のクラスにすることができます。ただし、これは機能します。

$("div[class^='btn-']")
于 2013-03-19T16:59:37.590 に答える
2

これを試して：$('input[class*='btn']').attr("class");

于 2013-03-19T16:59:45.503 に答える
2

@Vohuman の関数を再利用可能な関数にしました:

// getClassStartsWith(classes,startswith);
// Example : getClassStartsWith( 'item w-2 h-4 hello' , 'h-' );
function getClassStartsWith(t,n){var r=$.grep(t.split(" "),function(t,r){return 0===t.indexOf(n)}).join();return r||!1}

例...

HTML :

<div class="item w-2 h-4 hello"></div>

JS:

var $element = $('.item');
var classes = $element[0].className;
var getHeight = getClassStartsWith(classes,'h-');

それは戻りますh-4、そして、クラスがで始まらない場合h-は戻りますfalse

デモ: http://jsbin.com/mijujunaca/edit?js,console

于 2016-05-26T11:02:01.363 に答える
1

これはどう？ http://api.jquery.com/attribute-contains-word-selector/

$('input[class~="btn-"]')
于 2013-03-19T16:58:26.747 に答える
1

and で始まるクラスをbtn最初のクラスにすることはできません:

作業フィドル: http://jsfiddle.net/c9Tdx/

$("input[class^='btn'],input[class*=' btn']").each(function(){
     //whatever
});
于 2013-03-19T16:59:43.860 に答える
1

これを試して、

if($(selector).attr("class").lastIndexOf("classToStartFrom") == 0)
   return "this selector class name starts with 'classToStartFrom'";
else
   return "this selector class name doesn't start with 'classToStartFrom'";

コードはテストされていません。

于 2013-03-19T17:02:52.523 に答える
1

この関数は、正規表現を使用してクラス、ID、データ、およびすべての種類の属性を取得できます

$.fn.Get_Attr_Regex = function(Pattern,Type) 
{
    Type = Type || 'class';
    var List_Str = this.attr(Type);

    if(typeof List_Str !== typeof undefined && List_Str !== false) 
    {
        var regex = new RegExp(Pattern, "g");
        var List_Array = List_Str.split(" ");
        for(var i = 0; i < List_Array.length; i++)
        {
            if(regex.test(List_Array[i]))
            {
                return List_Array[i];
            }
        }
    }
    return false;
};

使用するには

$('.T_Header').Get_Attr_Regex('btn.*','class'); // => return class value which start with btnxxx

また

$('.T_Header').Get_Attr_Regex('btn.*','id');  // => return id value which start with btnxxx

また

$('.T_Header').Get_Attr_Regex('btn.*','data-info'); // => return data attribute value which start with btnxxx
于 2018-10-25T17:32:46.487 に答える