• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 148
  • Last Modified:

jQuery: Select element with highest value in attribute

Using jQuery, how can I change the background color of the element with the highest value for the attribute data-x?

In this example, only "Eleven" should be red.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Demo</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {

 $('div').filter(function( index ) {return index;}).css( "background-color", "red" );

});

</script>
</head>
<body>

<div data-x="4">Four</div>
<div data-x="11">Eleven</div>
<div data-x="2">Two</div>
<div data-x="3">Three</div>
<div data-x="5">Five</div>
<div data-x="9">Nine</div>

</body>
</html>

Open in new window

0
skij
Asked:
skij
1 Solution
 
Julian HansenCommented:
Any particular reason you are still using a transitional DOCTYPE?

You could do something like this
CSS
.maxval {
  background: green;
}

Open in new window

HTML
  <div data-x="4">Four</div>
  <div data-x="11">Eleven</div>
  <div data-x="2">Two</div>
  <div data-x="3">Three</div>
  <div data-x="5">Five</div>
  <div data-x="9">Nine</div>

Open in new window

jQuery
$(function() {
  var max = 0, current = false;
  $('div[data-x]').each(function() {
    var value = $(this).data('x');
    if (value > max) {
      current = $(this);
      max = value;
    }
  });
  current.addClass('maxval');
});

Open in new window

Working sample here
1

Featured Post

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now