How do I cross elements between two known elements in dom using jquery?

Question

I want to allow the user to click the start point, and then click the end point and be able to manipulate various form elements between the two selected points.

A page is a table with many rows, and each row contains relevant information for managing / saving the answer to a question in this row. Each line has a hidden input for the value, as well as a Yes / No button, mainly for unskilled users. A TD cell with a question allows the user to click or switch between Yes, No, Empty. So basically I left the switches on the page to show "Yes / No", and use a hidden field to store the value (1,0, -1)

This is what I use to set the answer when the question cell is clicked.

    $(".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);
    });

Now I want to allow the user to click on the start point, and this answer will fill the whole next question to the place where he clicked on the second element. There may be 10 questions, or 20 questions, this is an unknown variable. It can have a page with 130 questions, and 20 questions in a row can be "Yes." As indicated above, each row has a Question cell, and the cell has an element cell.

I know how to set the start element and the end element based on the jquery selector / function associated with the click / dblclick event below.

I am not sure how to navigate the dom or select all the elements that I need to manipulate between the two selected points on the page.

    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', , 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;
                }

            });

Answer 2

, . , , / .

EDIT:

- . , , , (nodeName). .

(function($) {

  $.fn.rangeSelector = function(options) {   

    var settings = $.extend({ startClass : 'start', endClass: 'end'},options||{}); 
    var name = this[0].nodeName.split(':'); 
    name = name[name.length -1];
    var startIndex = $(name + '.' + settings.startClass).prevAll().length;
    var endIndex = $(name + '.' + settings.endClass).prevAll().length + 1;
    return this.slice(startIndex,endIndex);
  }

})(jQuery);

/*
 * will get all textboxes between textboxes 
 * with className start and end, inclusive
 */
$('input:text').rangeSelector();

. , /edit URL-. , jQuery startClass, endClass , , , .

2:

• jQuery, , , - $('parent > input:text'), parent ( : , , ).

• RangeSelector , (, .rangeSelector({ start: "myStartClass", end: "myEndClass"}) start end), .

• ( ) options ( , ).

• , jQuery, name. nodeName jQuery .

• , start end. , 0 .

• jQuery start end () jQuery ( jQuery ). slice(), jQuery, Array.slice() .

Answer 3

The question is a bit outdated, but here is the solution I use for my projects:

JQuery selector

(function ($) {
    $.fn.between = function (elm0, elm1) {
        var index0 = $(this).index(elm0);
        var index1 = $(this).index(elm1);

        if (index0 <= index1)
            return this.slice(index0, index1 + 1);
        else
            return this.slice(index1, index0 + 1);
    }
})(jQuery);

Using

$('body').between($('#someid'), $('#someid2')).each(function () {
    // Do what you want.
});