J'ai une liste d'éléments qui ont plusieurs classes, par exemple:
<input class="etape btn-info others">
<input class="etape btn-inverse others">
<input class="etape btn-danger others">
Comment écrire du code jQuery qui me permettra ce qui suit ...
$(".etape").click(function(){
$(this).get("the class that starts with btn-")
// in order to store this value in a variable to reuse it later
});
Vous pouvez utiliser une expression régulière ou split
le nom de la classe.
$(".etape").click(function(){
var classes = $.grep(this.className.split(" "), function(v, i){
return v.indexOf('btn') === 0;
}).join();
});
Vous pouvez aussi essayer:
$(".etape").click(function () {
var theClass = $(this).attr("class").match(/btn[\w-]*\b/);
console.log(theClass);
});
Les utilisations correspondent à la place de grep ...
// 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;
}
});
});
Il serait probablement préférable de stocker ces valeurs dans l'attribut data
:
<input class="etape others" data-btntype="info">
<input class="etape others" data-btntype="inverse">
<input class="etape others" data-btntype="danger">
Ensuite:
$(".etape").click(function(){
var myBtnType = $(this).data('btntype');
});
Je viens de rendre la fonction de @Vohuman réutilisable:
// 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}
Exemple...
HTML:
<div class="item w-2 h-4 hello"></div>
JS:
var $element = $('.item');
var classes = $element[0].className;
var getHeight = getClassStartsWith(classes,'h-');
Cela retournera h-4
, et si aucune classe ne commence par h-
retournera false
Vous pouvez simplement faire votre propre classe. Cependant, cela fonctionnera.
$("div[class^='btn-']")
Essayez ceci: $('input[class*='btn']').attr("class");
Que dites-vous de cela? http://api.jquery.com/attribute-contains-Word-selector/
$('input[class~="btn-"]')
Une classe commençant par btn
et qui ne peut pas être la première classe:
Violon en marche: http://jsfiddle.net/c9Tdx/
$("input[class^='btn'],input[class*=' btn']").each(function(){
//whatever
});
Essaye ça,
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'";
Le code n'est pas testé.
Cette fonction permet d’obtenir Classe, ID, Données et tout type d’attributs avec regex
$.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;
};
Pour l'utiliser
$('.T_Header').Get_Attr_Regex('btn.*','class'); // => return btnxxx
ou
$('.T_Header').Get_Attr_Regex('btn.*','id'); // => return btnxxx
ou
$('.T_Header').Get_Attr_Regex('btn.*','data-info'); // => return btnxxx