jQueryを使用して、特定のCSSを持つすべての要素を選択します。

Question

jQueryを使用して、特定のCSSプロパティが適用されているすべての要素を選択するにはどうすればよいですか？例：

.Title 
{ 
    color:red; 
    rounded:true; 
} 

.Caption 
{ 
    color:black; 
    rounded:true; 
} 

"rounded"というプロパティで選択する方法は？

CSSクラス名は非常に柔軟です。

$(".Title").corner(); 
$(".Caption").corner(); 

この2つの操作を1つの操作に置き換える方法。たぶんこのようなもの：

$(".*->rounded").corner(); 

これを行うには良い方法はありますか？

Answer 1

CSSセレクタを使用して、適用されたCSSプロパティに基づいてエレメントを選択することはできません。

これを手動で実行したい場合は、ドキュメント内のすべての要素を選択してループし、興味のあるプロパティの計算値をチェックすることができます（これは実際のCSSプロパティでのみ機能しますroundedなどのように構成されています）。それはまた遅いだろう。編集に対応して

アップデート - group selectors：

$(".Title, .Caption").corner(); 

Answer 2

これは2歳のスレッドですが、それはおそらく、他の人に役に立つかもしれないので、それはまだ私には有用でした。私が望むよう

var x = $('.myselector').filter(function() { 
    return this.style.some_prop == 'whatever' 
}); 

として簡潔ではないが、私は今を除いて、このような何かを必要としたことがない、と私はそれを見るように、それは、とにかく一般的な使用のために非常に効率的ではありません。ここでは、私がやってしまったものです。

Answer 3

ありがとう、Bijou。私はあなたのソリューションを使用し、代わりに純粋ジャバスクリプトのjQueryのの.cssを使用し、このような：

var x = $('*').filter(function() { 
    return $(this).css('font-family').toLowerCase().indexOf('futura') > -1 
}) 

この例font-family属性値が「フューチュラ」が含まれるすべての要素を選択することになります。

Answer 4

カスタムCSSプロパティが継承されないので、それぞれの要素に直接適用する必要があります（あなたが動的にプロパティを追加するJSを使用している場合でも、あなたがクラスを追加することによって、それを行う必要があります）、そう...

CSS

.Title 
{ 
    color:red; 
} 

.Caption 
{ 
    color:black; 
} 

あなたが丸め定義する必要はありませんHTML

：すべての真の性質を。ビジューのよう

jQuery('.Rounded').corner(); 

Answer 5

同様

<div class='Title Rounded'><h1>Title</h1></div> 
<div class='Caption Rounded'>Caption</div> 

JS：ちょうど '丸い' クラスの存在を使用しています。ほんの少しの強化：

• 不要ハードコードするセレクタ（S）
• はチェックしません。

  $('[class]').filter(function() { 
      return $(this).css('your css property') == 'the expected value'; 
      } 
  ).corner(); 
  

  私は$（ '[クラス]'）を使用してだと思うが良いですすべてのHTML要素を1つずつ

ここにはexampleがあります。ここで

Answer 6

はきれいで、理解しやすいソリューションです。

// find elements with jQuery with a specific CSS, then execute an action 
$('.dom-class').each(function(index, el) { 
    if ($(this).css('property') == 'value') { 
     $(this).doThingsHere(); 
    } 
}); 

それはコーナー、フィルタやリターンを使用していないので、このソリューションは異なっています。これは意図的に、より多くのユーザーを対象としています。交換する

もの：

1. あなたのセレクタと ".dom・クラス" を交換してください。
2. CSSのプロパティと値を、探しているものに置き換えます。
3. "doThingsHere（）"を、その 見つかった要素で実行したいものに置き換えます。