Question 42529 in Html Question posted in
Some basic documentation can be found here.

How to highlight specific values on a page? – Html

For example, on a site like this

How can I code something that will highlight any prices above €20 red within the product grid? Also, I need it to continue to work even when users select/deselect categories on the right.

Would this be 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;
}
Tags:

2

Answers


  1. 0

    You can add classes to element using its classList properties

    element.classList.add("higherthan20");

    Your code would now be something like this:

    $('div').each(function() {
  $(this).find('.mErEH _223RA').sort(function(a, b) {
    return b.innerText - a.innerText;
  }).slice(0, 5).forEach((element) => element.classList.add('higherthan20'))
});

    If you want to conditionally add color to text, your code can become like this:

    $('div').each(function() {
  $(this).find('.mErEH _223RA').sort(function(a, b) {
    return b.innerText - a.innerText;
  }).slice(0, 5).forEach((element) => {
 if (element.innerText === "20") {
    element.color = 'red'
 }
 // or other text
 // you can try using regex to match string that you need
 
});
    Login or Signup to reply.
  2. 0

    The site referenced, filters prices by displaying only prices that meet a range defined by the user while removing any prices not within the price range. The filter you requested just highlights anything more than 20. Moreover, the second request:

    "Also, I need it to continue to work even when users select/deselect categories on the right.",

    is impossible to answer since you haven’t posted any code involving any of the other filters.

    Concerning the code that was posted, it fails not only syntactically, but in purpose as well.

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

      • jQuery Methods

        Method Description 
        .each()
        		 iterates over a jQuery object and calls a function for each DOM element 
        .find()
        		 collects all specified DOM elements within a jQuery object as a new jQuery object 
        .addClass()
        		 adds a class(es) to each DOM element within a jQuery object

      • Plain JavaScript Methods

        Method Description 
        .sort()
        		 returns a new copy of a given array in ascending order 
        .slice()
        		 returns a defined range of elements within a given array as a new array

    2. In short, the jQuery object consisting of all div.mErEH _223RA is created by .each() and .find(). Then the function fails when .sort() is called on said jQuery object because:

      • .sort() is a plain JavaScript method which does not recognize jQuery objects
      • .sort() deals with arrays, of which jQuery objects are not

    3. If the function were to forgo jQuery all together and just collect all div.mErEH _223RA as a NodeList and then convert into an array, .sort() and .slice() will work. Unfortunately, a new array that consists of the first 6 DOM elements in ascending order is returned which is not even close to highlighting all DOM elements with over 20.

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

    Details are commented in example

    /**
 * 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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search