是否有可能通過JavaScript中的關鍵字相關性來過濾和排列列表？

說我有喜歡是否有可能通過JavaScript中的關鍵字相關性來過濾和排列列表？

<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，然後按大多數匹配關鍵字的順序顯示列表？

因此，如果我輸入國內，貓科動物和翅膀，列表中的第一項將是貓跟隨鸚鵡，然後是狗，獅子和狼。

來源

2012-11-19 thisuser

我會點你到['過濾器（）']（http://api.jquery.com/filter）和['hasClass（）']（http://api.jquery.com/hasClass ）方法讓你開始。 – Blazemonger

我剛剛發現這個插件http://tinysort.sjeiti.com/ ...這可能是相關的嗎？我不太確定 – thisuser

不使用jQuery，你將不得不把這些單詞和他們的關鍵字放入一個數組中。

然後通過它們循環比較他們與3個選定的單詞，給他們一個值/分數。

然後，你將不得不根據他們的分數排序這些詞。這是一個有關排序JavaScript數組鏈接： How to sort an associative array by its values in Javascript?

使用有序陣列可以遍歷它創建的列表項，並動態地將它們寫入到用「的innerHTML」屬性覈實。

我會建立這樣一個數組（有幾個方法，你可以去了解這一點）：

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-19 22:29:18 Josh

對不起，我真的不明白這裏發生了什麼？什麼是displayWord？什麼是調用listItem函數？ – thisuser

這只是我設置「顯示字」數組的其中「顯示字」是顯示在列表項中的字的首選方式。 listItem函數正在像對象/類一樣使用。你可以像這樣開始一個新的列表項：listItems ['Wolf'] = new listItem（'Wolf'）; – Josh

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-19 23:03:59 Bergi

是否有可能通過JavaScript中的關鍵字相關性來過濾和排列列表？

回答

相關問題