Как получить элементы определенного класса, начинающиеся с заданной строки?

У меня есть список элементов, которые имеют несколько классов, например:

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

Ответ 1

Вы можете использовать регулярное выражение или split имя класса.

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

http://jsfiddle.net/LQPh6/

Ответ 2

Вы также можете попробовать:

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

Использует совпадение вместо grep...

Ответ 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;
        }
     });

  });

Live Demo

Ответ 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

Ответ 5

Вы можете просто сделать btn своим классом. Однако это будет работать.

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

Ответ 6

Попробуйте следующее: $('input[class*='btn']').attr("class");

Ответ 7

Я только что сделал функцию @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

Ответ 8

Как насчет этого? http://api.jquery.com/attribute-contains-word-selector/

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

Ответ 9

Класс, начинающийся с btn и который не может быть первым классом:

Рабочая скрипка: http://jsfiddle.net/c9Tdx/

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

Ответ 10

Попробуйте это,

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

Код не проверен.