Réécriture de titre : une technique pour mettre l'accent sur des valeurs spécifiques sur une page

Question

Par exemple, sur un site comme

Comment puis-je coder pour mettre en évidence tout prix supérieur à 20 € en rouge dans la grille des produits ? De plus, j'en ai besoin pour continuer à travailler même si l'utilisateur sélectionne/désélectionne une catégorie sur la droite.

Est-ce du JavaScript ?

$('div').each(function() {
  $(this).find('.mErEH _223RA').sort(function(a, b) {
    return b.innerText - a.innerText;
  }).slice(0, 5).addClass('supérieur à 20')
});</pré>
<pre class="brush:php;toolbar:false;">.higherthan20 {
  La couleur rouge;
}

Answer 1

Sites Web référencés Filtrez les prix en affichant uniquement ceux qui correspondent à une fourchette définie par l'utilisateur, tout en supprimant tous les prix qui se situent en dehors de la fourchette de prix. Le filtre que vous avez demandé ne met en évidence que tout ce qui dépasse 20. Aussi, deuxième demande :

Je ne peux pas répondre car vous n'avez publié aucun code impliquant d'autres filtres.

Concernant le code publié, il échoue non seulement en termes de syntaxe, mais aussi en termes de finalité.

1. Les méthodes jQuery ne reconnaissent pas les références JavaScript simples et vice versa. Afin d'utiliser des méthodes JavaScript pures sur un

   objet jQuery, l'objet jQuery doit être déréférencé. Évitez de chaîner les méthodes jQuery et JavaScript. Voici la table des méthodes jQuery et la table des méthodes JavaScript pures utilisées dans la question :

   • Méthodes jQuery
     

     MéthodeDescription

     .each()

     Itérer sur les objets jQuery et appeler des fonctions pour chaque élément DOM

     .find()

     Collectez tous les éléments DOM spécifiés dans l'objet jQuery en tant que nouvel objet jQuery

     .addClass()

     Ajouter une classe à chaque élément DOM dans un objet jQuery

   • Méthode JavaScript pure
     

     MéthodeDescription

     .sort()

     Renvoie une nouvelle copie du tableau donné par ordre croissant

     .slice()

     Renvoie la plage d'éléments définis dans le tableau donné en tant que nouveau tableau

     En bref, lorsqu'elle est donnée par div.mErEH _223RA组成的jQuery对象是通过.each()和.find()创建的代码>.然后，当在所述 jQuery 对象上调用 .sort() , la fonction échoue car :

     • .sort() est une méthode JavaScript normale et ne reconnaît pas les objets jQuery
     • .sort() gère les tableaux, pas les objets jQuery

     Cela fonctionnerait si la fonction supprimait complètement jQuery et collectait simplement tout div.mErEH _223RA 作为 NodeList，然后转换为数组，.sort() 和 .slice(). Malheureusement, le nouveau tableau renvoyé est constitué des 6 premiers éléments DOM par ordre croissant, ce qui ne vous permet même pas de mettre en évidence tous les éléments DOM au-delà de 20.

     Dans l'exemple suivant, la mise en page HTML réelle n'a pas d'importance, className ".x" 应替换为 ".mErEH _223RA".

     Exemples annotés avec détails

     /**
      * For each ".x"...
      */
     $(".x").each(function() {
       /**
        * ...get it's text with .textContent.
        * Then exclude the first character ("€") with .substring(1)...
        * ...and convert the text into a real number with Number().
        */
       let price = Number(this.textContent.substring(1));
       /**
        * Next, if the number is greater than 20...
        */
       if (price > 20) {
         /**
          * ...add ".red" className to DOM element. 
          */
         $(this).addClass("red");
       }
     });

     .red {
       color: red
     }

     <main>
       <table>
         <tbody>
           <tr><td class="x">€20</td><td class="x">€100</td><td class="x">€10</td></tr>
           <tr><td class="x">€55</td><td class="x">€2</td><td class="x">€2000</td></tr>
           <tr><td class="x">€8</td><td class="x">€325</td><td class="x">€120</td></tr>
           <tr><td class="x">€70</td><td class="x">€99</td><td class="x">€220</td></tr>
           <tr><td class="x">€19</td><td class="x">€25</td><td class="x">€440</td></tr>
           <tr><td class="x">€111</td><td class="x">€44</td><td class="x">€13</td></tr>
         </tbody>
       </table>
     </main>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>