CODEWITHSUNDEEP
javascriptjquerytampermonkey
Nur Bar
Nur Bar

Reputation: 75

Find data-id which has got the maximum value

I have 4 data-id attributes where all 4 text fields are optional. I want to get the data-id of the list item which has the maximum value and change the background color to lime.

I don't want to change smaller values. Sample values:(5-6-7-8), but I have 100 numbers like that. 

const input = [
  {q: "5"}, 
  {q: "6"},
  {q: "7"},
  {q: "8"}
];

input.forEach(({q}) => $(`[data-id$="${q}"]`).css("background", "lime"));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="question-text" class="question">Whats your favorite colour?</div>
<ul class="answers" id="answers">
  <li data-id="5" class="answer">Blue</li>
  <li data-id="6" class="answer">Red</li>
  <li data-id="7" class="answer">Yellow</li>
  <li data-id="8" class="answer">Purple</li>
</ul>

Upvotes: 1

Views: 646

Answers (3)

Carl Edwards
Carl Edwards

Reputation: 14434

Your first order of business would obviously be to reduce the array of objects by their q value while converting the strings to actual numbers. After that you find the highest number via Max.max. No need to loop through the list items here. You could simply use a jQuery selector and interpolate the highest number in the data attribute:

const input = [
  {q: "5"}, 
  {q: "6"},
  {q: "7"},
  {q: "8"}
];

const nums = input.reduce((prev, {q}) => {
  return [...prev, +q];
}, []);

const highestNum = Math.max(...nums);

$(`[data-id="${highestNum}"`).css('background-color', 'lime');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="question-text" class="question">Whats your favorite colour?</div>
<ul class="answers" id="answers">
  <li data-id="5" class="answer">Blue</li>
  <li data-id="6" class="answer">Red</li>
  <li data-id="7" class="answer">Yellow</li>
  <li data-id="8" class="answer">Purple</li>
</ul>

Upvotes: 1

Yaroslav Chapelskyi
Yaroslav Chapelskyi

Reputation: 210

    var elArray = $(`[data-id]`).toArray(); 

    var maxId = Math.max.apply(null, elArray.map(value => { 
        return $(value).attr('data-id');
    }));

    $(`[data-id=${maxId}]`).css('background', 'lime');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="question-text" class="question">Whats your favorite colour?</div>
<ul class="answers" id="answers">
  <li data-id="5" class="answer">Blue</li>
  <li data-id="66" class="answer">Red</li>
  <li data-id="7" class="answer">Yellow</li>
  <li data-id="8" class="answer">Purple</li>
</ul>

If I understand you correctly, you want to set background to html element with maximum data-id attribute value. If so, you need to reproduce next steps.

  1. You get all html elements with data-id attr and convert them to array.

    var elArray = $([data-id]).toArray();

  2. Get data-id max value of elArray.

Math.max.apply(context, arr) return the max value of arr.

arr.map() method creates a new array with the results of callback function on every element in array. In your case, return array of data-id values.

 var maxId = Math.max.apply(null, elArray.map(value => {
        return $(value).attr('data-id');
    }));

  1. Set the background color to element with max data-id.

    $([data-id=${maxId}]).css('background', 'lime');

Upvotes: 1

Brock Adams
Brock Adams

Reputation: 93493

This is a fairly common "array max" problem, with a DOM application. You can use Array.reduce()Doc to find the max, like so:

 maxData = $(".answers li[data-id]").get ().reduce ( (maxObj, crrntNode) => {
    var idVal   = parseInt ( $(crrntNode).data("id"), 10);
    if (idVal > maxObj.value) {
        maxObj.value  = idVal;
        maxObj.node   = crrntNode;
    }
    return maxObj;
  },
  {value: 0, node: null}
);
$("body").append (`<p>The highest data-id value was ${maxData.value}.</p>`)

$(maxData.node).css ("background", "lime");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="question-text" class="question">Whats your favorite colour?</div>
<ul class="answers" id="answers">
    <li data-id="5" class="answer">Blue</li>
    <li data-id="6" class="answer">Red</li>
    <li data-id="7" class="answer">Yellow</li>
    <li data-id="8" class="answer">Purple</li>
</ul>

Note the relationship between data- attributes and jQuery's .data() function.

Upvotes: 1

Related Questions