查找具有最大值

Question

我有4个data-id属性，其中所有4个文本字段都是可选的。我想获得具有最大值的列表项的data-id，并将背景颜色更改为lime。

我不想改变较小的值。 样本值：（5-6-7-8），但我有100个这样的数字。

＆＃13;

＆＃13;

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

input.forEach(({q}) => $(`[data-id$="${q}"]`).css("background", "lime"));

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

这是一个相当常见的＆＃34;数组max＆＃34;问题，使用DOM应用程序。您可以使用Array.reduce()^Doc查找最大值，如下所示：

＆＃13;

＆＃13;

 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");

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

请注意data-属性与jQuery的.data()函数之间的关系。

Answer 2

    var elArray = $（`[data-id]`）。toArray（）;     var maxId = Math.max.apply（null，elArray.map（value =＆gt; {         return $（value）.attr（'data-id'）;     }））;     $（`[data-id = $ {maxId}]`）。css（'background'，'lime'）; ＆lt; script src =“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js”＆gt;＆lt; / script＆gt; ＆lt; div id =“question-text”class =“question”＆gt;您最喜欢的颜色是什么？＆lt; / div＆gt; ＆lt; ul class =“answers”id =“answers”＆gt;   ＆lt; li data-id =“5”class =“answer”＆gt; Blue＆lt; / li＆gt;   ＆lt; li data-id =“66”class =“answer”＆gt; Red＆lt; / li＆gt;   ＆lt; li data-id =“7”class =“answer”＆gt;黄色＆lt; / li＆gt;   ＆lt; li data-id =“8”class =“answer”＆gt;紫色＆lt; / li＆gt; ＆LT; / UL＆GT; 如果我理解正确，您希望将背景设置为具有最大data-id属性值的html元素。如果是这样，您需要重现下一步。 你得到所有带有data-id attr的html元素并将它们转换为数组。 var elArray = $（[data-id]）。toArray（）; 获取elArray的data-id最大值。 Math.max.apply（context，arr）返回arr的最大值。 arr.map（）方法创建一个新数组，其中包含数组中每个元素的回调函数结果。在您的情况下，返回data-id值的数组。  var maxId = Math.max.apply（null，elArray.map（value =＆gt; {         return $（value）.attr（'data-id'）;     }））; 将背景颜色设置为具有max data-id的元素。 $（[data-id = $ {maxId}]）。css（'background'，'lime'）;

Answer 3

您的第一笔业务显然是在将字符串转换为实际数字时按q值减少对象数组。之后，您会通过Max.max找到最高的数字。无需在此处循环列表项。您可以简单地使用jQuery选择器并在数据属性中插入最高数字：

＆＃13;

＆＃13;

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');

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;