jquery - JQuery - 選択されたチェックボックスと選択されていないチェックボックスの両方に対して何かをする

Question

以下を使用して、選択したボックスをループできます。

 $('#sel_driver_file_options :selected').each(function(i, selected) { 
                //console.log($(this).val());
                var driverName = $(this).val();
                var driverText = $(this).text();
                $("#tr_file_options_input").show();
                $("#span_" + driverName).show();
                $('<div id="desc_file_options_input_' + driverName + '">Enter a Value For ' + driverText + '</div>').prependTo($("#span_" + driverName));
            }); // end selected each

しかし、選択されていない「#sel_driver_file_options」内のすべてのチェックボックスに対してアクションを実行するにはどうすればよいですか?

私がやろうとしているのは、追加されたものを削除することです:

$('<div id="desc_file_options_input_' + driverName + '">Enter a Value For ' + driverText + '</div>').prependTo($("#span_" + driverName));

ユーザーが選択を解除したとき。それ以外の場合は、もう一度選択すると、2 つ目が作成されます。

編集：私が取り組んでいるコードの完全なブロックの JSFiddle

Edit2: JSFiddle を更新し、整理しやすくするためにテーブルを書き直し、close 関数を次のように変更しました。

close: function (event, ui) {
            $('#sel_driver_file_options :selected').each(function (i, selected) {
                var driverName = $(this).val();
                var driverText = $(this).text();
                var driverSpan = $("#span_" + driverName);
                var driverDesc = $("#desc_" + driverName);
                console.log("Selected = " + driverName);
                $("#tr_file_options_input").show();
                $(driverSpan).show();
                $(driverDesc).show();
            }); // end each selected
            $('#sel_driver_file_options').not(':selected').each(function () {
                //if ($('#sel_driver_file_options').not(':selected')) {
                var driverName = $(this).val();
                var driverText = $(this).text();
                var driverSpan = $("#span_" + driverName);
                var driverDesc = $("#desc_" + driverName);
                console.log("Not Selected = " + driverName);
                $(driverSpan).hide();
                $(driverDesc).hide();
                // driverSpan.find('[id^="desc_file_options_input_"]').remove();
            }); // end each not selected
            //$('#desc_file_options_input_' + driverName).remove();
        } //end close function

コンソールに次のように表示されます。

Selected = default-priority
Not Selected = default-priority

not(':selected') が機能していないかのように？

Answer 1

選択したものを配列に入れてから .each を再度実行し、配列にないすべてのスパンを非表示にすることで整理しました。現在、期待どおりに機能しています。 誰かが必要とする場合に備えて、実用的なソリューションの JSFiddle を次に示します。

そして、ここに関連するコードがあります：

$("#sel_driver_file_options").multiselect({
    show: ["blind", 200],
    hide: ["blind", 500],
    multiple: true,
    selectedList: 3,
    noneSelectedText: "Select file() options",
    open: function (event, ui) {
        // nothing for now
    },
    close: function (event, ui) {
        var arr = [];
        $('#sel_driver_file_options :selected').each(function (i, selected) {
            var driverName = $(this).val();
            var driverText = $(this).text();
            var driverSpan = $("#span_" + driverName);
            var driverDesc = $("#desc_" + driverName);
            arr.push(driverName);
            console.log("Selected = " + driverName);
            $("#tr_file_options_input").show();
            $(driverSpan).show();
            $(driverDesc).show();
        }); // end each selected
        // Now loop through all options and remove spans for unselected ones
        $('#sel_driver_file_options option').each(function () {
            var driverName = $(this).val();
            var driverText = $(this).text();
            var driverSpan = $("#span_" + driverName);
            var driverDesc = $("#desc_" + driverName);
            if ($.inArray(driverName, arr) == -1) {
                console.log("Not in array: " + driverName);
                $(driverSpan).hide();
                $(driverDesc).hide();
            }
        }); // end each not selected
    } //end close function
}); // end multiselect

Answer 2

このようなものはうまくいくでしょう

$('#sel_driver_file_options').not(':selected');