web-dev-qa-db-ja.com

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

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

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

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

「rounded」という名前のプロパティで選択する方法は？

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

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

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

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

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

javascriptjquerycssjquery-selectors
58
ebattulga

（CSSセレクターを使用して）適用されたCSSプロパティに基づいて要素を選択することはできません。

これを手動で行う場合は、ドキュメント内のすべての要素を選択し、それらをループして、目的のプロパティの計算値を確認できます（ただし、実際のCSSプロパティでのみ機能しますが、 rounded）。それも遅いでしょう。

編集に応じて更新します— グループセレクター ：

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

これは2年前のスレッドですが、私にとってはまだ有用だったので、他の人にとっても有用かもしれません。私がやったことは次のとおりです。

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

私が望むほど簡潔ではありませんが、今を除いてこのようなものは必要ありません。

63
Bijou Trouvaille

ありがとう、ビジュー。私はあなたのソリューションを使用しましたが、次のように純粋なJavaScriptの代わりにjQuery .cssを使用しました。

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

この例では、font-family属性値には「Futura」が含まれます。

35
Ivan Chaer

ビジューに似ています。ほんの少しの強化：

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

私は$（ '[class]'）を使用する方が良いと思います：

  • セレクターをハードコーディングする必要はありません
  • すべてのHTML要素を1つずつチェックするわけではありません。

例 です。

14
AnthonyY

わかりやすくわかりやすいソリューションを次に示します。

// 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-class」をセレクタに置き換えます。
  2. CSSのプロパティと値を探しているものに置き換えます。
  3. 「doThingsHere（）」を、見つかった要素で実行するものに置き換えます。
2
kintsukuroi