jQuery-通过“样式”属性中的自定义CSS键查找元素的最佳方法

Question

I have got a page where some elements have a fake CSS property called "key" like this :

<div style="color:red;key:settings.color;background-color:violet;key:settings.bkgColor;"> 
</div>

I want to find these elements by their key. I have come up with this :

function getElsByCssKey(){
    var foundEls = [];
    var style;
    $( "*" ).each(function(){
        style = $(this).attr("style");
        if(typeof style !== "undefined" && style.indexOf("key") !=- 1){
            foundEls.push(this);
        }
    })
    return foundEls;
}

I guess there are faster/better ways to do that ?

Answer 1

You can use like this

$("[style*='key']").each(function(){

 });

This will return all elements which contains the style attribute key

Edit

 $("[style*='key:listColor']").each(function(){
   alert($(this).attr("style"));    
  });

Answer 2

You can go like this:

$("[style*='key']").each(function(){
    foundEls.push($(this));
});

The document is here : http://api.jquery.com/attribute-contains-selector/

Answer 3

You can use something like this i think

var key = $( this ).css( "key" ); 

usually we can get any css property using this

var color= $( this ).css( "color" );

so that may work out for you.