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

我希望允许用户单击起点，然后单击终点，并能够在选定的两个点之间操作各种表单元素。

该页面是一个包含许多行的表格，每行都包含用于操作/保存该行中问题的答案的相关信息。每行都有一个隐藏的值输入，以及“是/否”单选按钮，主要针对不熟练的用户。带有问题的 TD 单元格允许用户单击或在"is"、“否”、“空”之间切换。所以基本上我在页面上留下了单选按钮来显示是/否并使用隐藏字段来存储值(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 个问题可能是"is"。如上所述，每行都有一个“问题”单元格，前面的单元格是项目单元格。

我知道如何根据绑定(bind)到下面列出的 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); 
        } 
    }); 

请您参考如下方法:

恕我直言，最好的方法是执行如下操作。您可以循环遍历类名为“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; 
                } 
 
            });