タイトルのリライト: ページ上の特定の値を強調するテクニック

Question

たとえば、

のようなサイトでは、

商品グリッド内で 20 ユーロを超える価格を赤色で強調表示するにはどうすればよいですか?また、ユーザーが右側のカテゴリを選択/選択解除した場合でも機能し続けるようにする必要があります。

これは JavaScript ですか?

$('div').each(function() {
  $(this).find('.mErEH _223RA').sort(function(a, b) {
    b.innerText - a.innerText を返します。
  }).slice(0, 5).addClass('higherthan20')
});

.higherthan20 {
  赤色;
}

Answer 1

参照Webサイト 価格をフィルタリングして、ユーザー定義の範囲内に収まる価格のみを表示し、価格範囲外の価格を削除します。リクエストしたフィルターは、20 を超えるもののみを強調表示します。さらに、2 番目のリクエスト:

他のフィルターを含むコードを投稿していないため、回答できません。

投稿されたコードに関しては、構文だけでなく意図的に失敗しています。

1. jQuery メソッドはプレーンな JavaScript 参照を認識しません。またその逆も同様です。 jQuery オブジェクトで純粋な JavaScript メソッドを使用するには、jQuery オブジェクトを 逆参照する必要があります。 jQuery メソッドと JavaScript メソッドを連鎖させないでください。質問で使用されている jQuery メソッド テーブルと純粋な JavaScript メソッド テーブルは次のとおりです:

   • jQuery メソッド
     

     ＃＃＃方法＃＃＃ ＃＃＃説明する＃＃＃ えええええjQuery オブジェクトを反復処理し、各 DOM 要素の関数を呼び出しますjQuery オブジェクト内の指定されたすべての DOM 要素を新しい jQuery オブジェクトとして収集しますjQuery オブジェクトの各 DOM 要素にクラスを追加します

     	えええええ
     	えええええ

     純粋な JavaScript メソッド

   • 
     

     ＃＃＃方法＃＃＃ ＃＃＃説明する＃＃＃
     えええええつまり、div.mErEH _223RA で構成される jQuery オブジェクトは、

     えええええ	指定された配列の新しいコピーを昇順で返します
     指定された配列で定義された要素の範囲を新しい配列として返します

     .each()
   と
   .find()
コードによって作成されます。 >.その後、jQuery オブジェクトで
2. .sort()

   が呼び出されるとき、関数は次の理由で失敗します: .sort() は通常の JavaScript メソッドであり、jQuery オブジェクトを認識しません .sort()

   は配列を処理しますが、jQuery オブジェクトは処理しません
   関数が jQuery を完全に放棄し、すべての
   • div.mErEH _223RA を NodeList として収集し、配列に変換する場合、.sort()
   および
   .slice ()
は機能します。残念ながら、返される新しい配列は昇順の最初の 6 つの DOM 要素で構成されており、20 を超えるすべての DOM 要素を強調表示することさえできません。

3. 次の例では、実際の HTML レイアウトは関係ありません。className ".x" は ".mErEH _223RA" に置き換える必要があります。

詳細は例でコメントされています

リーリー リーリー リーリー