Title Rewriting: A Technique for Emphasizing Specific Values ​​on a Page

Question

For example, on a site like

How can I code to highlight any price above 20€ in red in the product grid? Also, I need it to keep working even if the user selects/deselects a category on the right.

Is this JavaScript?

$('div').each(function() {
  $(this).find('.mErEH _223RA').sort(function(a, b) {
    return b.innerText - a.innerText;
  }).slice(0, 5).addClass('higherthan20')
});

.higherthan20 {
  color: red;
}

Answer 1

ReferencedWebsite Filters prices by displaying only those that fit within a user-defined range, while removing any prices that are not within the price range. The filter you requested only highlights anything above 20. Additionally, the second request:

Can't answer because you haven't posted any code involving any other filters.

Regarding the posted code, it fails not only on syntax, but also on purpose.

1. jQuery methods do not recognize plain JavaScript references and vice versa. In order to use pure JavaScript methods on a jQuery object, the jQuery object must be dereferenced. Avoid chaining jQuery and JavaScript methods. Here is the jQuery method table and pure JavaScript method table used in the question:

   • jQuery method
     

     method	describe
     .each()	Iterate over jQuery objects and call functions for each DOM element
     .find()	Collect all specified DOM elements in the jQuery object as a new jQuery object
     .addClass()	Add a class to each DOM element in the jQuery object

   • Pure JavaScript method
     

     method	describe
     .sort()	Return a new copy of the given array in ascending order
     .slice()	Return the range of elements defined in the given array as a new array

2. In short, a jQuery object consisting of div.mErEH _223RA is created through .each() and .find() The code>. Then when .sort() is called on the jQuery object, the function fails because:

   • .sort() is a normal JavaScript method and does not recognize jQuery objects
   • .sort() handles arrays, jQuery objects do not

3. If the function abandons jQuery entirely and just collects all div.mErEH _223RA as a NodeList and then converts to an array, .sort() and .slice () can work. Unfortunately, the new array returned consists of the first 6 DOM elements in ascending order, which doesn't even allow you to highlight all DOM elements beyond 20.

In the following example, the actual HTML layout is irrelevant, className ".x" should be replaced with ".mErEH _223RA".

Details are commented in the examples

/**
 * 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>