Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to pass an array to function in jquery

I wish to pass an array to a function(can you tell me if im on the right track?)

and then in the function I wish to loop through the values in an array and append each one into the following LI element in HTML

This is what I have so far a user will code in the URL values he wants to pass:

var arrValues = ['http://imgur.com/gallery/L4CmrUt', 'http://imgur.com/gallery/VQEsGHz'];
calculate_image(arrValues);

function calculate_image(arrValues) {
    // Loop over each value in the array.
    var jList = $('.thumb').find('href');
    $.each(arrValues, function(intIndex, objValue) {
        // Create a new LI HTML element out of the
        // current value (in the iteration) and then
        // add this value to the list.
        jList.append($(+ objValue +));
    });
}
}

HTML

<li>
    <a class="thumb" href="" title="Title #13"><img src="" alt="Title #13" /></a>
    <div class="caption">
        <div class="download">
            <a href="">Download Original</a>
        </div>
        <div class="image-title">Title #13</div>
        <div class="image-desc">Description</div>
    </div>
</li>
like image 419
Edward Avatar asked Feb 06 '13 11:02

Edward


People also ask

How to pass an array in jQuery?

If you'd like to pass in an array, simply put it in as a parameter. In Javascript, you can pass numbers, strings, arrays, objects, and even functions in as parameters. First, define the arrays.

How to pass an array to a JavaScript function?

Method 1: Using the apply() method: The apply() method is used to call a function with the given arguments as an array or array-like object. It contains two parameters. The this value provides a call to the function and the arguments array contains the array of arguments to be passed.

Which keyword is used to access the array of arguments of a function?

By using the params keyword, you can specify a method parameter that takes a variable number of arguments. The parameter type must be a single-dimensional array.


1 Answers

If you'd like to pass in an array, simply put it in as a parameter. In Javascript, you can pass numbers, strings, arrays, objects, and even functions in as parameters.

See this example for a thumbnail builder implementation: http://jsfiddle.net/turiyag/RxHys/9/

First, define the arrays.

var bluearray = [
    'http://fc02.deviantart.net/fs30/f/2008/056/8/0/Purple_hair___Bipasha_Basu_by_mstrueblue.jpg',
    'http://static.becomegorgeous.com/img/arts/2010/Feb/20/1805/purple_hair_color.jpg',
    'http://img204.imageshack.us/img204/6916/celenapurpleqp7.jpg'
    ];
var greenarray = [
    'http://25.media.tumblr.com/tumblr_m7fqmkNEhc1qlfspwo1_400.jpg',
    'http://www.haircolorsideas.com/wp-content/uploads/2010/12/green-red-hair.jpg',
    'http://fc02.deviantart.net/fs71/i/2010/011/9/c/Neon_Yellow_and_Green_Hair_by_CandyAcidHair.jpg'
    ];

Then when the DOM is loaded, call the functions to load the thumbnails.

$(function() {
    addThumbs(bluearray);
    addThumbs2(greenarray);
});

addThumbs uses jQuery's each function to make things a bit cleaner. I find it looks better and is nicer to use that the normal Javascript for loop.

function addThumbs(paths) {
    $.each(paths,function(index, value) {
        $("div").append('<img src="' + value + '" />');
    });
}

But if you're a fan of native Javascript, the normal for loop is implemented in addThumbs2

function addThumbs2(paths) {
    for(index in paths) {
        $("div").append('<img src="' + paths[index] + '" />');
    }
}
like image 141
turiyag Avatar answered Oct 17 '22 22:10

turiyag