Question

这是我的新问题：

在搜索结果页面上，我们显示了12个产品。评级大于3.7的所有产品都有评级星形图像及其在跨度内的值作为字符串：

<div class="searchResult">
<img src="#"/>
<span class="ratings">4.2</span>out of 5
</div>

没有任何顺序来表示产品的呈现方式。

我需要的是获得评级大于4.5的所有产品，并将第一和第二大产品应用于背景色。

怎么办？我找到了一种方法来找到前两个有4.5的评分，但不是大的。

例如：5个产品的评分为4.5： 4.6， 4.5， 5.0， 4.7， 4.9 在这种情况下，我需要通过CSS将背景颜色仅应用于具有5.0和4.9的人，而不是第一个和第二个。

嗯，这是一个棘手的部分：我只能使用Javascript和jQuery 来解决这个问题。 CSS部分没问题，没问题。

我希望我有道理......任何问题只是问我，我会尽快找到你。：）

非常感谢!! ：）

Answer 1

Filter然后sort：

$(".searchResult").filter(function() { //Filter down to results greater than 4.5

    return parseFloat($(this).find(".ratings").text()) > 4.5;

}).sort(function (a, b){ //Sort the remaining search results

    return parseFloat($(b).find(".ratings").text()) - parseFloat($(a).find(".ratings").text())  ;

}).filter(":lt(2)").css("background-color","red");  //Set the style of the first two elements

JSFiddle

Answer 2

您需要首先将匹配的div作为数组提取，然后对该数组进行排序。两者都可以使用过滤和排序功能在一个步骤中完成：

var sortedarr = $('div.searchResult')
    .filter(function() { // only the high ratings
        return (+$(this).find('span.ratings').text() > 4.5);
    })
    .get() // convert to an array of DOM elements
    .sort(function(a, b) { // now sort from highest to lowest
        return ($(b).find('span.ratings').text() - $(a).find('span.ratings').text());
    });
$highest = $(sortedarr[0]);   // a jQuery object
$runnerup = $(sortedarr[1]);

http://jsfiddle.net/mblase75/mgdGY/

Answer 3

略有不同的方法，不知道它是更好还是可能更糟：

var myarray= new Array();

$('.ratings').each(function() {
     myarray.push($(this).text());
});

function sortarray(a, b) {
     return (b - a);
}

myarray.sort(sortarray);

if (myarray[0] >= 4.5) {
     $('.ratings:contains('+myarray[0]+'):first').addClass('red');
}
if (myarray[1] >= 4.5) {
     $('.ratings:contains('+myarray[1]+'):not(.red):first').addClass('red');
}

用红色作为背景色等级。

可能更糟糕，因为它使用：包含，必须要求很高。

检索搜索结果的两个最大评级

3 个答案: