Wie erhält man Elemente einer bestimmten Klasse, beginnend mit einer gegebenen Zeichenkette?

Question

Ich habe eine Liste von Elementen, die mehrere Klassen haben, zum Beispiel:

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

Wie jQuery-Code zu schreiben, der mir folgendes erlauben ...

$(".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

Sie können Regular Expression oder split den Klassennamen verwenden.

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

http://jsfiddle.net/LQPh6/

Answer 2

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

    }); 

Live Demo

Answer 3

Wie wäre es damit? http://api.jquery.com/attribute-contains-word-selector/

$('input[class~="btn-"]') 

Answer 4

Sie könnten nur BTN seine eigene Klasse. Dies wird jedoch funktionieren.

$("div[class^='btn-']") 

Answer 5

Eine Klasse beginnend mit btn und die die erste Klasse nicht sein kann:

Arbeits Geige: http://jsfiddle.net/c9Tdx/

$("input[class^='btn'],input[class*=' btn']").each(function(){ 
    //whatever 
}); 

Answer 6

diese

Versuchen: $('input[class*='btn']').attr("class");

Answer 7

es wahrscheinlich besser wäre, Speichern Sie diese Werte im Attribut data:

Dann

<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

Answer 8

die Sie interessieren,

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'"; 

Der Code ist nicht getestet.

Answer 9

können Sie auch versuchen:

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

Spiel Verwendet statt grep ...

Answer 10

ich nur @Vohuman ‚s-Funktion eine gemacht wieder benutzbaren:

// 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} 

Beispiel ...

HTML:

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

JS:

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

Das h-4 zurückkehren wird, und wenn keine Klasse mit h- beginnt wird false

Demo zurück: