jQuery更好的方法来调用多个元素的函数？

Question

I'm wondering if there is a better way to handle multiple function calls. Basically I have a function which receives and element as one of the arguments, along with some properties. I have to call this function on several elements...

function positionMe(element,position){ ... }

positionMe(obj1,top);
positionMe(obj2,left);
positionMe(obj3,bottom);
positionMe(obj4,right);
positionMe(obj5,bottom);

Just looking at the code seems like I'm doing something really wrong. At first I thought I might be able to pass a collection of elements in, but it doesn't seem to work. Any ideas?

Answer 1

With the information you have provided I would create an array with all the needed information and loop through it inside your function:

function positionMe(elements)
{
    for(var i = 0, numberOfElements = elements.length; i < numberOfElements ; i++) {
        // Do stuff with the objects you want to do in here

        // access the current object
        console.log(elements[i].object);

        // access the current direction
        console.log(elements[i].direction);
    }
}

var yourObjects = [
    {
        object: obj1,
        direction: 'top'
    },
    {
        object: obj2,
        direction: 'left'
    },
    {
        object: obj3,
        direction: 'bottom'
    },
    // etc
];
positionMe(yourObjects);

UPDATE

As Reflective commented :

better use for (var i in element) { console.log(elements[i].object);}

This is not the case for arrays in javascript. Well it's not that simple. because you will end up also looping through all the inherited stuff of the array object like eg pop() , push() etc. There is a way to prevent this though through the use of hasOwnProperty() .

Another way would have been to use forEach() which is available as of JavaScript 1.6. So I don't think all user agents already builtin support for this.

Answer 2

<script src="http://code.jquery.com/jquery-latest.js"></script>

<script>

var objArray = [
 ["obj1","top"],
 ["obj2","bottom"],
 ["obj3","middle"]
];

$.each(objArray, function(i, v) {positionMe(v[0], v[1]);});

function positionMe(element, val) {
   alert (element+":"+val);
}

</script>

Answer 3

If your objects are elements on the page, you can use jQuery's $.each() function to run the function on each event. The syntax would work like:

$('selector that grabs all objects').each(positionMe($(this), position));