0

こんにちは、スパンのリストのフィルターを作成しようとしています。スパンに含まれるものを小文字または無視するのに問題があります。何か案は?

 $("#filterinput2").keyup(function () {
            var filter = ($(this).val()).toLowerCase(); // get the value of the input, which we filter on
            console.log("lower filter" + filter);
            if (filter) {         
                // hide tr's for songs not matching and show tr's for songs matching
                $(".tonelist").find(".song:not(:contains(filter))").parent().parent().parent().fadeOut("slow");
                $(".tonelist").find(".song:contains(filter)").parent().parent().parent().fadeIn();
                if (window.console != undefined) {
                    console.log($(".tonelist").find(".song:not(:contains(" + filter + "))").parent().parent().parent().innerHTML);
                }

                $(".tonelist").find(".grouptitle:not(:contains(" + filter + "))").parent().fadeOut("slow");
                $(".tonelist").find(".grouptitle:contains(" + filter + ")").parent().fadeIn();
                if (window.console != undefined)
                    console.log($(".tonelist").find(".grouptitle:not(:contains(" + filter + "))").parent().parent().parent().innerHTML);
            } else
            // if input field is empty, show all tr's
                $(".tonelist").find("tr").fadeIn();

            ColorLines();
        });
4

1 に答える 1

0

これらの各スパンの内容を自分で確認する必要があります。これを行うには、.html()関数を使用して、各曲/グループタイトルのコンテンツを文字列として取得します。このようなものが機能する可能性があります(私はそれをテストしていませんが):

    $("#filterinput2").keyup(function () {
        var filter = ($(this).val()).toLowerCase(); // get the value of the input, which we filter on
        console.log("lower filter" + filter);
        if (filter) {         
            // hide tr's for songs not matching and show tr's for songs matching
            spans = $(".tonelist").find(".song, .grouptitle")
            for (s in spans) {
                el = $(spans[s]);
                if ( el.html().match( new RegExp(filter, "i") ) ) {
                    el.fadeIn();
                } else {
                    el.fadeOut("slow");
                }
            }
        } else
        // if input field is empty, show all tr's
            $(".tonelist").find("tr").fadeIn();

        ColorLines();
    });

その理由は、:contains()cssセレクターでは大文字と小文字が区別され、それを変更する方法がないためです。

于 2012-04-24T14:22:58.237 に答える