查找具有最大值的data-id

Question

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

我不想更改较小的值。示例值：(5-6-7-8)，但我有 100 个这样的数字。

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>

Answer 1

这是一个相当常见的 "array max" 问题，与 DOM 应用程序有关。您可以使用 Array.reduce()^Doc 找到最大值，如下所示：

 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>

注意 data- 属性与 jQuery 的 .data() 功能之间的关系。

Answer 2

    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>

如果我没理解错的话，您想将背景设置为具有最大 data-id 属性值的 html 元素。如果是这样，您需要重现后续步骤。

你得到了所有 html 个具有 data-id 属性的元素并将它们转换为数组。

var elArray = $([data-id]).toArray();
获取 elArray 的数据 ID 最大值。

Math.max.apply(context, arr) return arr.[=15= 的最大值]

arr.map() 方法创建一个新数组，其中包含数组中每个元素的回调函数的结果。在您的情况下，return data-id 值数组。

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

将背景颜色设置为具有最大数据 ID 的元素。

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

Answer 3

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

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>

查找具有最大值的data-id

Find data-id which has got the maximum value

javascript

jquery

tampermonkey