jQuery looping through classes using each() - problem

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

No, and it seems like it's actually selecting correctly because if I don't select then I got extra text on the page. It's just that it doesn't show the dialog on see-details click — bobek
– bobek, Commented Sep 23, 2011 at 17:05

Bobson · Accepted Answer · 2011-09-23 18:14:31Z

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.

answered Sep 23, 2011 at 18:14

Bobson

13.7k5 gold badges59 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Robert · Accepted Answer · 2011-09-23 17:08:23Z

0

Try this (untested):

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

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

Index passes the loop number to the function. It starts from 0, where I think you need it to start at 1, so I've added 1 to each where it's used.

answered Sep 23, 2011 at 17:08

Robert

3251 gold badge3 silver badges12 bronze badges

3 Comments

Bobson Over a year ago

I'm pretty sure index isn't going to be visible to the inner function. Even if it were, the inner function only gets evaluated on click, so index will be the wrong value.

Robert Over a year ago

I realise this question is answered but the index is visible to the inner function. This in document.ready:

$('.someClass').each(function(index){                     $(this).click(function(){                         alert(index);                     });                 });

The alerts that come up on click in this case display the value of index for that element, 0 - N.

Bobson Over a year ago

Hmm. I've never been able to get that to work before. I'm going to have to take another look at this the next time I need it. Clearly I've been doing something wrong.

Collectives™ on Stack Overflow

jQuery looping through classes using each() - problem

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related