3

このコードを取得しました（それに取り組んでいます）：

uniqueHead = {};
$("div.hleft h3").each(function () {
    var thiz = $(this)
    var thisValq = thiz.text();
    var thisVal = thisValq.trim().toLowerCase().toString();
    if(!(thisVal in uniqueHead) ) {
    uniqueHead[thisVal] = "";
    }
    else {
    $(this).parent().parent().css('border-color','red')
    }
});

このコードは、グループの検索結果を分割できる検索結果のリストに適用されます。つまり、「結果 2」と同じ名前の「結果 1」を 1 位と 12 位にすることができます。

私がする必要があるのは、同じテキストを持つすべての h3 をグループ化し、それらを適切に並べ替え、異なるクラスを適用して、各グループで結果 1 のみを表示することです (後で同様の結果を表示するトリガーを作成できます)。

次のようなコードを想像してください。

<div class="blist">
    <div class="hleft">
    <h3>Three</h3>
    </div>
</div>

<div class="blist">
    <div class="hleft">
    <h3>One</h3>
    </div>
</div>

<div class="blist">
    <div class="hleft">
    <h3>Three</h3>
    </div>
</div>

<div class="blist">
    <div class="hleft">
    <h3>Two</h3>
    </div>
</div>

<div class="blist">
    <div class="hleft">
    <h3>One</h3>
    </div>
</div>

<div class="blist">
    <div class="hleft">
    <h3>Three</h3>
    </div>
</div>

<div class="blist">
    <div class="hleft">
    <h3>Two</h3>
    </div>
</div>

<div class="blist">
    <div class="hleft">
    <h3>Three</h3>
    </div>
</div>

上記は「実際の」コードではありませんが、JS 部分ではとにかく動作します。:) バックエンドを制御できないため、結果の表示方法を変更できないため、注文などの JS ソリューションが必要です。

4

2 に答える 2

1

グループ化部分を処理するには、見つけた各名前の最初のインスタンスに対応する DOM 要素を保存する必要があると思います (現在、空の文字列を記述しているだけです)。次に、現在境界線を赤に設定している場所で、代わりに重複した要素を DOM から削除し、元の一致する要素の後に挿入します。その後、各複製要素にクラスを追加して、それを非表示にすることができます。

これをテストしていませんが、このようなものでうまくいくはずです。

uniqueHead = {};
$("div.hleft h3").each(function () {
    var thiz = $(this);
    var thisValq = thiz.text();
    var thisVal = thisValq.trim().toLowerCase().toString();
    if(!(thisVal in uniqueHead) ) {
        uniqueHead[thisVal] = thiz;
    }
    else {
        // remove the element from the dom and place it after the original one
        var originalElement = uniqueHead[thisVal];
        originalElement.after($(this).remove().addClass("hiddenDuplicate"));
    }
});

後で重複をどのように表示するかは、あなた次第です。複製の各セットを親 div でラップし、その div 内のボタンをクリックすると、すべての子要素を表示できます。

于 2012-10-24T16:49:05.897 に答える
0

この種の作品。それは少し醜いですが。:)

uniqueHead = {};
$("div.hleft h3").each(function () {
    var thiz = $(this);
    var thisValq = thiz.text();
    var thisVal = thisValq.trim().toLowerCase().toString();
    if(!(thisVal in uniqueHead) ) {
        uniqueHead[thisVal] = thiz;
    }
    else {
        // remove the element from the dom and place it after the original one
        var originalElement = uniqueHead[thisVal];
        originalElement.parent().parent().after($(this).parent().parent().addClass("hiddenDuplicate"));
    }
});​

jsFiddle リンク: http://jsfiddle.net/VbePd/3/

ただし、これの問題は、 after() が既に追加されたコンテンツを認識していないため、順序が逆になることです。したがって、1,2,3,4 は 4,3,2,1 になります。

于 2012-10-25T10:32:48.770 に答える