Question

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

<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。

Answer 1

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

然后循环浏览它们，将它们与3个选定的单词进行比较，为它们提供一个值/分数。

然后你必须根据他们的分数来订购这些单词。这是一个关于排序javascript数组的链接： How to sort an associative array by its values in Javascript?

使用该有序数组，您可以遍历它以创建列表项，并使用＆＃34; innerHTML＆＃34;将它们动态地写入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++) {

    }
}

Answer 2

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选择进行排序的简单示例，如果为每个元素分配匹配关键字的分数并仅比较这些数字，则可以使其更具性能。

是否可以在javascript中按关键字相关性过滤和排列列表？

2 个答案: