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 を使用して、最も一致するキーワードの順にリストを表示するにはどうすればよいでしょうか?

したがって、家畜、猫、翼を入力した場合、リストの最初の項目は猫、次にオウム、次に犬、ライオン、オオカミになります。

4

2 に答える 2

1

jQueryを使用しない場合は、それらの単語とそのキーワードを配列に入れる必要があります。

次に、それらをループして、選択した3つの単語と比較し、値/スコアを付けます。

次に、スコアに基づいてこれらの単語を並べ替える必要があります。javascript配列の並べ替えに関するリンクは次のとおり です。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 に答える