Jquery dynamic selector on Click

Question

Hi all,

I need "i" click functions depending on variable unknown length:

for(i=0;i<=unknownLength;i++)
{$("#group_link_"+i).click(function()
{//asynchronous call to a Web Service for the specific content on group_link_i div, here I will use $("#group_link_"+i).val()}
 );}

This code is not working. However, the same code, if i delete the loop and replicate the code above "i" times, it's working perfectly.

How can I acomplish this functionality using a loop?

Many thanks

Answer 1

FIXED:

for(var i = 0;; i++) {
    var element = $("#group_link_" + i);
    if (element.length) {
        element.click(function() {

        });        
    } else {
        break;
    }
}

Answer 2

A loop isn't necessary here, just use a better selector like the 'starts with' selector

$("a[id^='group_link_']").click(function() {
    ///do something with $(this) - which will be each element
});

Answer 3

Great Naspinsky, I didn't know that functionality. However, How can I specify the another specific id's inside the click function? if I use $(this) is great for "group_link_" but I need to do specific things for another id's as you can see below:

Here is the real code which I have to replicate "i" times. This code is working for i=0. The specific id's for i=0 are: group_link_0 - group_content_0 - contact_list_0 And I should do the same for group_link_1 - group_content_1 - contact_list_1....etc.

        $("#group_link_0").click(function() 
    {
        $("#group_content_0").empty();

        $().SPServices({
          operation: "GetUserCollectionFromGroup",
          groupName: $("#group_link_0").text(),
          async: false,
          completefunc: processUsersGroups
       }); 

       function processUsersGroups (xData, status)
       {
            var i = 0;
            var email_user="";
            $("#group_content_0").append("<ul id=\"contact_list_0\" class=\"contact_list\"><div id=\"paginator\" class=\"paginator_accordion\">");
            $(xData.responseXML).find("[nodeName=User]").each
            (
                function()
                {   
                    if ($(this).attr("Email")!="")
                    {
                        email_user=$(this).attr("Email");
                    }
                    else
                    {
                        email_user="<i>Not Available in Active Directory</i>";
                    }

                    $("#group_content_0").append("<li class=\"contact\"><div class=\"user\"></div><div class=\"user_name\">"+$(this).attr("Name")+"</div><div class=\"mail\"></div><div class=\"user_mail\">"+email_user+"</div><div class=\"thick\"></div><div class=\"minus\"></div><div class=\"plus\"></div></li>");
                    i++;
                }
            )
            if(i==0)
            {
                $("#group_content_0").append("There's no users available in this group");
            }
            else
            {
                $("#group_content_0").append("</div></ul>");
            }
       }

       $(function(){ $("#paginator").pagination(); });   


    }
    );

Answer 4

Thanks Naspinski. I sort out the problem as u told me. Many Thanks!. 100% working:

        $("a[id^='group_link_']").click(function()
    {
            $(this).parent().next().empty();

            $().SPServices({
              operation: "GetUserCollectionFromGroup",
              groupName: $(this).text(),
              async: false,
              completefunc: processUsersGroups
           }); /*close().SPServices({ */

           function processUsersGroups (xData, status)
           {
                var i = 0;
                var append_data = "";
                var email_user="";
                $("a[id^='group_link_']").parent().next().append("<ul class=\"contact_list\"><div id=\"paginator\" class=\"paginator_accordion\">");
                $(xData.responseXML).find("[nodeName=User]").each
                (
                    function()
                    {   
                        if ($(this).attr("Email")!="")
                        {
                            email_user=$(this).attr("Email");
                        }
                        else
                        {
                            email_user="<i>Not Available in Active Directory</i>";
                        }

                        append_data = append_data +"<li class=\"contact\"><div class=\"user\"></div><div class=\"user_name\">"+$(this).attr("Name")+"</div><div class=\"mail\"></div><div class=\"user_mail\">"+email_user+"</div><div class=\"thick\"></div><div class=\"minus\"></div><div class=\"plus\"></div></li>";
                        i++;
                    }
                )           
                $("a[id^='group_link_']").parent().next().append(append_data);
                if(i==0)
                {
                    $("a[id^='group_link_']").parent().next().append("There's no users available in this group");
                }
                else
                {
                    $("a[id^='group_link_']").parent().next().append("</div></ul>");
                }
           }
           $(function(){ $("#paginator").pagination(); });
    });