0

假设我有一个包含多个类（关键字）的项目列表，例如

<ul>
<li class="domestic tail feline">Cat</li>
<li class="wild tail canine">Wolf</li>
<li class="domestic tail canine">Dog</li>
<li class="wings beak domestic">Parrot</li>
<li class="wild tail feline">Lion</li>
</ul>

然后在上一页中，用户从选择框中选择 3 个特征并单击下一步。使用 localstorage 保存关键字，您如何使用 javascript 或 jQuery，然后按最匹配关键字的顺序显示列表？

因此，如果我输入了国内、猫科动物和翅膀，列表中的第一项将是 Cat，然后是 Parrot，然后是 Dog、Lion 和 Wolf。

4

2 回答 2

1

不使用 jQuery，您必须将这些单词及其关键字放入一个数组中。

然后循环遍历它们，将它们与 3 个选定的单词进行比较，给它们一个值/分数。

然后，您必须根据它们的分数对这些单词进行排序。这是一个关于对 javascript 数组进行排序的链接： How to sort an associative array by its values in Javascript?

使用该有序数组，您可以循环遍历它以创建列表项并使用“innerHTML”属性将它们动态写入 div。

我会像这样设置一个数组（有几种方法可以解决这个问题）：

var listItems = new Array();
function listItem(displayWord){
    this.word = displayWord;
    this.keywords = new Array();
    this.matches = 0;
}

listItems['cat'] = new listItem('cat');
listItems['cat'].keywords.push('domestic');
listItems['cat'].keywords.push('tail');
listItems['cat'].keywords.push('feline');

for (x in listItems) {
    for (var c = 1; c < listItems[x].keywords.length; c++) {

    }
}
于 2012-11-19T22:29:18.317 回答
0 
var $ul = ..., // the list element
    keywords = ["domestic", "feline", "wings"]; // get that list from an input,
                                                // localstorage or whereever
$ul.children().sort(function(a, b) {
    var score = 0,
        $a = $(a),
        $b = $(b);
    for (var i=0; i<keywords.length; i++)
        score += $a.hasClass(keywords[i]) - $b.hasClass(keywords[i]);
        // if only a has the keyword, it adds 1, if only b has it 1 is substracted,
        // and if they both have if or not the score does not change.
    return score;
}).appendTo($ul); // re-append in the right order

这是一个对 jQuery 选择进行排序的简单示例，如果您为每个元素分配匹配关键字的分数并仅比较这些数字，则可以提高性能。

于 2012-11-19T23:03:59.410 回答