代码之家 › 专栏 › 技术社区 › Nur Bar

查找具有最大值的数据id

tampermonkey jquery javascript

Nur Bar · 技术社区 · 7 年前

我有4个 data-id 所有4个文本字段都是可选的属性。我想得到 数据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>

3 回复 | 直到 7 年前

Brock Adams 7 年前

对于DOM应用程序,这是一个相当常见的“array max”问题。您可以使用 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() 作用

Yaroslav Chapelskyi 7 年前

    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>

如果我理解正确,您希望将背景设置为html元素,最大 数据id 属性值。如果是这样,您需要重现接下来的步骤。

您可以获取所有数据id为attr的html元素,并将它们转换为数组。

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

数学最大应用 (context,arr)返回 arr公司 .

arr.map() 方法使用回调函数对数组中的每个元素的结果创建一个新数组。在您的情况下,返回 数据id 价值观

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

将背景色设置为具有max data-id的元素。

$( [data-id=${maxId}] ).css(“背景”、“石灰”);

Carl Edwards monkbroc 7 年前

您的首要任务显然是通过 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>