比较元素值并将属性分配给较大的

Compare element values and assign attribute to larger

本文关键字：分配 属性 元素 比较      更新时间：2023-09-26

我一直在绞尽脑汁想办法解决这个问题。。。

我有这个HTML:

<div id="aa1">23</div>
<div id="a2">14</div>
<div id="b1">67</div>
<div id="bb2">21</div>

我试图做的是成对比较这些元素的值。最简单的解决方案是：

var a1 = parseFloat($("#aa1").text()).toFixed(2);
var a2 = parseFloat($("#a2").text()).toFixed(2);
var b1 = parseFloat($("#b1").text()).toFixed(2);
var b2 = parseFloat($("#bb2").text()).toFixed(2);
if (a1 > a2){
    $('#aa1').css('color','#fff');
}else{
    $('#a2').css('color','#fff');
}
if (b1 > b2){
    $('#b1').css('color','#fff');
}else{
    $('#bb2').css('color','#fff');
}

假设div ID的长度不相同，将包含数字，并且将有多个对，尽管配对总是相同的（总是a1/a2、b1/b2等），但最好的方法是什么？我尝试了几种不同的解决方案（substring、regex、Math.max），但每种解决方案都遇到了不同的障碍。

编辑：

约翰使我走上了正确的方向。我最终使用的js是：

//Grabbing initial values.  Yes, these could be assigned in the next section.
var a1 = parseFloat($("#aa1").text()).toFixed(2);
var a2 = parseFloat($("#a2").text()).toFixed(2);
var b1 = parseFloat($("#b1").text()).toFixed(2);
var b2 = parseFloat($("#bb2").text()).toFixed(2);
//Setting up the pairs.  Note the additional - character to enable the ability to split correctly.
var arr1 = ['aa1-'+a1, 'a2-'+a2];
var arr2 = ['b1-'+b1, 'bb2-'+b2];
//Creating the two-demensional array
var mainarr = [arr1, arr2];
//Loop through each pair in the array
for (var i=0; i < mainarr.length; i++){
//Split off the values I want
var first = mainarr[i][0].split('-')[1], second = mainarr[i][1].split('-')[1];
//Split off the html IDs I want
var firstCss = '#'+mainarr[i][0].split('-')[0], secondCss = '.'+mainarr[i][1].split('-')[0];
//compare pairs and assign the correct attribute to the element.
((first > second) ? $(firstCss) : $(secondCss)).css('background-color','#DBFFDB');
}

仍然需要首先设置对，但这比一百万个if/else语句要好得多。

你能一次循环两个元素吗：

function value($div) {
    return parseFloat($div.text()).toFixed(2);
}
var $divs = $('div'); // Use whatever selector gets all the desired elements
for (var i = 0; i < $divs.length; i += 2) {
    var $div1 = $divs[i], $div2 = $divs[i + 1];
    ((value($div1) > value($div2)) ? $div1 : $div2).css('color','#fff');
}
相关文章：