Question

I am using this code to loop through each “.accessoryrow” and then select “dialog” + counter and “.see-details” + counter. So first time when loop goes by it selects dialog1 class and see-details1 class; second time dialog2, see-details2 and so on. I think I am not correctly adding counter to the selector. Please correct me. Thank you

CODE:

  var counter = 1;
        $(function () {
        $(".accessoryrow").each(function() {
            $(".dialog" + counter).dialog({
                autoOpen: false,
                show: "blind",
                hide: "fade"
            });

            $(".see-details" + counter).click(function () {
                $(".dialog" + counter).dialog("open");
                return false;
            });
            counter++;
        });

Answer 1

The problem is that the $(".dialog" + counter).dialog("open"); line isn’t getting evaluated until the link is clicked. Thus it’s using the value of counter which is current as of then. A better way to do it would be to take out the counter altogether, and use jQuery selectors to select the correct .dialog.

Without the HTML, I can’t say what it should look like, but you’re going to want the click function to look like something along the lines of

 $(".see-details").click(function () {
        $(this).sibling(".dialog").dialog("open");
        return false;
    });

Of course, that assumes that the .dialog element is actually a sibling of .see-details. You’ll need to traverse the tree a bit more if it isn’t.