如何使用jquery遍历dom中两个已知元素之间的元素？

Question

我想允许用户单击一个起点然后单击一个结束点,并能够操作所选择的两个点之间的各种表单元素.

该页面是一个包含大量行的表,每行包含操作/保存该行中问题答案的相关信息.每行都有一个隐藏的值输入,以及是/否单选按钮,主要用于非熟练用户.带有问题的TD单元允许用户在是,否,空之间单击或切换.所以基本上我把页面上的单选按钮显示为是/否,并使用隐藏字段来存储值(1,0,-1)

这是我在单击问题单元格时用来设置答案的方法.

    $(".question").bind("click dblclick", function(e) {

        var newClassName = "AnswerUnknown";

        var hiddenAnswerId = $(this).attr('id').replace("question", "answer");

        var answer = parseInt($("#" + hiddenAnswerId).val());

        var newValue;

        switch (answer) {
            case -1:
                newClassName = "AnswerCorrect";
                newValue = 1;
                $("#" + $(this).attr('id').replace("answer", "radioYes")).attr('checked', 'checked');
                $("#" + $(this).attr('id').replace("answer", "radioNo")).attr('checked', '');
                break;
            case 1:
                newClassName = "AnswerWrong";
                newValue = 0;
                $("#" + $(this).attr('id').replace("answer", "radioYes")).attr('checked', '');
                $("#" + $(this).attr('id').replace("answer", "radioNo")).attr('checked', 'checked');
                break;
            default:
                newClassName = "AnswerEmpty";
                newValue = -1;
                $("#" + $(this).attr('id').replace("answer", "radioYes")).attr('checked', '');
                $("#" + $(this).attr('id').replace("answer", "radioNo")).attr('checked', '');
        }
        $("#" + hiddenAnswerId).val(newValue);
        $(this).removeClass().addClass(newClassName);
    });

现在我想让用户点击一个起点并让该答案将所有以下问题填充到他们点击第二个项目的任何地方.可能是10个问题,或20个问题,这是一个未知的变量.可能有一个页面上有130个问题,连续20个问​​题可能是"是".如上所述,每行都有一个"问题"单元格,之前的单元格是项目单元格.

我知道如何根据绑定到下面列出的click/dblclick事件的jquery选择器/函数设置起始元素和结束元素.

我不确定的是如何遍历dom或选择我需要在页面上的两个选定点之间操作的所有元素.

    var StartItem;
    var EndItem;

    $(".item").bind("click dblclick", function(e) {

        var StartClassName = "AnswerUnknown";
        var EndClassName = "AnswerUnknown";
        var StartAnswerId;
        var EndAnswerId;
        var StartAnswer;

        if (StartItem === undefined) {
            StartItem = this;
            StartAnswerId = $(this).attr('id').replace("item", "rs");
            StartAnswer = parseInt($("#" + StartAnswerId).val());
        }
        else {
            if (EndItem === undefined) {
                EndItem = this;
                EndAnswerId = $(this).attr('id').replace("item", "rs");
                EndAnswer = parseInt($("#" + EndAnswerId).val());
            }
        }


        if (StartItem == this) {
            $(this).removeClass().addClass(StartClassName);
        }

        if (EndItem == this) {
            $(this).removeClass().addClass(EndClassName);
        }
    });

Answer 1

恕我直言，最好的方法是执行如下操作。您可以循环遍历类名为“item”的元素集合，当您找到起始元素时，您可以开始执行您所描述的处理。由于您有“this”，您可以使用该 id 并执行您在 Question.click 函数中所做的操作。

        var counter = 0;

    // This will loop over each element with classname "item", so make sure you take that into account
            $('.item').each(function(i) {
        // function returns this, but you can see what index your on with 'i'
                if (this == StartItem) {
                    // You can start processing rows
                    counter = 1;
                }
                else {
                    if (counter > 0) {
                        // Process rows/items after the first item above
                        counter = counter + 1;
                    }
                }
                if (this == EndItem) {
                    counter = 0
                    // Finish up processing if any
                    //Break out of each;
                }

            });