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

时间:2012-11-19 21:43:30

标签: javascript jquery html html5

假设我有一个包含多个类(关键字)的项目列表,例如

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

2 个答案:

答案 0 :(得分: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++) {

    }
}

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