Question

I want to allow the user to click a start point and then click an ending point and be able to manipulate various form elements between the two points that were selected.

The page is a table with numerous rows and each row contains the relevant information to manipulate/save an answer to the question in that row. Each row has a hidden input for the value, as well as Yes/No radio buttons, mainly for un-skilled users. The TD cell with the question allows the user to click or toggle between Yes,No,Empty. So basically I left the radio buttons on the page to show Yes/No and use a hidden field to store a value of (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 a starting point and have that answer populate all the following question down to wherever they clicked on the second item. Could be 10 questions away, or 20 questions, it is an unknown variable. There may be a page with 130 questions on it, and 20 questions in a row may be “Yes”. As stated above each row has a “Question” cell and the cell before that is the item cell.

I know how to set the starting element and the ending element based on a jquery selector/function bound to a click/dblclick event listed below.

What I am not sure about is how to traverse the dom or select all the elements 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

The best way IMHO is to do something like below. You can loop over the collection of elements with class name “item” and when you find your start element you can begin doing the processing that you described. Since you have ‘this’ you can take that id and do what you were doing in your question.click function.

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

            });