[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register Now

Solved

jQuery: Select element with highest value in attribute

Posted on 2016-09-05

1 solution

Medium Priority

121 Views

Last Modified: 2016-09-08

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

Comment

Question by:skij

[X]

Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

Help others & share knowledge
Earn cash & points
Learn & ask questions

Join The Community

1 Comment

LVL 59

Accepted Solution

by:Julian Hansen

Julian Hansen earned 2000 total points

ID: 417847742016-09-05

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

Featured Post

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Delegation for dynamic elements using JQuery on()

Article by: Anthony

There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…

jQuery

Using Ajax in CodeIgniter

Article by: Marco

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.

PHP, jQuery, and Form Actions

Video by: Marco

The viewer will learn how to dynamically set the form action using jQuery.

Introduction to jQuery (Part 2)

Video by: Jason

The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…