jQuery 如何获取以给定字符串开头的特定类的元素?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/15505745/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 15:12:39  来源:igfitidea点击:

How to get elements of specific class starting with a given string?

jqueryhtmlcsstwitter-bootstrap

提问by fatiDev

I have a list of elements that have multiple classes, for example:

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

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

How to write jQuery-code that will allow me the following...

如何编写允许我执行以下操作的 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 
});

回答by undefined

You can use Regular Expression or splitthe class name.

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

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

http://jsfiddle.net/LQPh6/

http://jsfiddle.net/LQPh6/

回答by Marc Audet

You can also try:

你也可以试试:

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

Uses match instead of grep...

使用 match 而不是 grep ...

回答by xyz

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

现场演示

回答by Marcus

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

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

<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

js小提琴

回答by Lorin

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

尝试这个: $('input[class*='btn']').attr("class");

回答by Eric Goncalves

You could just make btn its own class. However, this will work.

你可以让 btn 成为它自己的类。但是,这将起作用。

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

回答by l2aelba

I just made @Vohuman 's function to reusable one :

我刚刚将 @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}

Example...

例子...

HTML :

HTML :

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

JS :

JS:

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

That will return h-4, And if no class starts with h-will return false

那将返回h-4,如果没有类开始,h-将返回false

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

演示:http : //jsbin.com/mijujunaca/edit?js,console

回答by Mohamad Hamouday

This function can get Class, ID, Data and all kind of attributes using regex

此函数可以使用正则表达式获取 Class、ID、Data 和所有类型的属性

$.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;
};

To use it

使用它

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

or

或者

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

or

或者

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

回答by Alvaro

A class starting with btnand which can not be the first class:

btn和开头的类不能是第一类:

Working fiddle: http://jsfiddle.net/c9Tdx/

工作小提琴:http: //jsfiddle.net/c9Tdx/

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

回答by FibreFoX