SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Evangelist
    Join Date
    Dec 2008
    Location
    Plymouth, United Kingdon
    Posts
    449
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jquery loop to create dynamic-multiple vars?

    hi,

    I am not sure if this is possible, but I want to create a multiple vars dynamically, for instance, these are the vars I create manually,

    Code JavaScript:
    var left_1 = $('.column-global.left .item-global').eq(0);
        var left_2 = $('.column-global.left .item-global').eq(1);
        var left_3 = $('.column-global.left .item-global').eq(2);

    but the problem is I only need two or one vars above sometimes. but three is the max.

    so I am thinking of passing a parameter into the function to tell the code to create either 2 or 3 vars,

    Code JavaScript:
    // I declare empty vars first
        var left_1;
        var left_2;
        var left_3;
     
        // get the number from somewhere, from the class for instnace
        var last_class = $(this).attr("class").split(' ').slice(-1); 
     
        // loop the number with for loop
        for( var i = 1; i <= last_class; i++){
            left_1 = $('.column-global.left .item-global').eq(i-1);
        }

    but you notice that I am stuck - how can I loop the var in the {} of the for-loop?

    basically I want the for loop to produce the multiple vars like these (same as above),

    Code JavaScript:
    var left_1 = $('.column-global.left .item-global').eq(0);
        var left_2 = $('.column-global.left .item-global').eq(1);
        var left_3 = $('.column-global.left .item-global').eq(2);


    I also need to pass the vars into another function which is kept within that parent function like this,

    Code JavaScript:
    another_function(left_1, left_2, left_3);

    is it possible??

    thanks.

    p.s.

  2. #2
    SitePoint Evangelist TommiChi's Avatar
    Join Date
    Oct 2008
    Posts
    440
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why don't you just put your elements into an array, that you can then pass as arguments to a function:
    var left = [];
    for( var i = 0; i < last_class; i++)
    {
    left.push($('.column-global.left .item-global').eq(i));
    }

    another_function(left);

  3. #3
    SitePoint Evangelist
    Join Date
    Dec 2008
    Location
    Plymouth, United Kingdon
    Posts
    449
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TommiChi View Post
    Why don't you just put your elements into an array, that you can then pass as arguments to a function:
    var left = [];
    for( var i = 0; i < last_class; i++)
    {
    left.push($('.column-global.left .item-global').eq(i));
    }

    another_function(left);
    thanks for the reply. tried it but doesn't work for me yet... if you take a look on some code here that I use your push.() suggestion,

    Code JavaScript:
    $('.load-item-global:not(.disabled)').live('click',function(){
     
            var left = [];
            var right = [];
            var clone = [];
     
            var left_1;
            var left_2;
            var left_3;
     
            var right_1;
            var right_2;
            var right_3;
     
            var clone_1;
            var clone_2;
            var clone_3;
     
            var array_class = $(this).attr('class').split(' '); 
            var last_class = $(this).attr("class").split(' ').slice(-1); 
            //alert(last_class);
     
     
            /* scroll the page to the top at 170 px */
            $('html, body').animate({scrollTop:170}, 'slow');
     
            /* add a .current class to the target item */
            $(this).parentsUntil('.column-global').addClass('current');
     
            ...
     
            /* cloning the elements */
            for( var i = 1; i <= last_class; i++){
                left.push($('.column-global.left .item-global').eq(i-1));
    	    right.push($('.column-global.right .item-global').eq(i-1));
    	    clone[i] = right[i].clone().insertAfter(left[i]);
    	    right[i].hide();
            }
     
    /*
            var left_1 = $('.column-global.left .item-global').eq(0);
            var left_2 = $('.column-global.left .item-global').eq(1);
            var left_3 = $('.column-global.left .item-global').eq(2);
     
            var right_1 = $('.column-global.right .item-global').eq(0);
            var right_2 = $('.column-global.right .item-global').eq(1);
            var right_3 = $('.column-global.right .item-global').eq(2);
     
            var clone_1 = right_1.clone().insertAfter(left_1);
            var clone_2 = right_2.clone().insertAfter(left_2);
            var clone_3 = right_3.clone().insertAfter(left_3);
     
            right_1.hide();
            right_2.hide();
            right_3.hide();
    */
     
            /* prepend a fresh div */
            $('.column-global.right').prepend('<div class="wrapper-item"></div>');
     
            ...
     
            var path_url = $(this).attr('href');
            var path_file = $(this).attr('rel');
            var item_wrapper = $('.wrapper-item');
     
            var array_url = path_url.split('/');
            var pg_url = $(array_url).last()[0];
     
            item_wrapper.load(http_root+rp_template+path_file+'?url='+pg_url, function(){
     
                ...
     
                /* function pagination that allows you to click through the slices of the item */
               loop_item(item_wrapper, path_file, pg_url, clone_1, clone_2, clone_3, right_1, right_2, right_3);
     
                /* funstion button that returns you to the original */
               return_item(clone_1, clone_2, clone_3, right_1, right_2, right_3);
     
     
     
            });
     
            return false;
        });
     
     
    /* funstion button that returns you to the original */
    function return_item(clone_1, clone_2, clone_3, right_1, right_2, right_3) {
     
        $('.button-return').click(function(){
     
        /* remove all the clones */
        clone_1.remove();
        clone_2.remove();
        clone_3.remove();
     
        ...
     
        /* return all the clone parents */
        right_1.show();
        right_2.show();
        right_3.show();
     
        return false;
     
        });
     
    }

    thanks


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •