jQuery可以缩短一系列innerHTML语句吗？

Question

On my sites, I have two functions with several consecutive javascript innerHTML statements like so:

function myFunction(a, b, c, d, e, f, g) {
//Lots of code then
    document.getElementById("id1").innerHTML = a;
    document.getElementById("id2").innerHTML = b;
//Five more lines of this through parameter g
}

This first function has seven lines for seven parameters, and the second function has 16 lines for 16 parameters. I understand (if I use jQuery and I name each id with a numeric convention, see below) I can shorten this code as follows (function 2 as an example):

function myFunction2(a, b, c, .......p) {
//Lots of code then
    var z, myArray = [a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p];
    for (z in myArray) {
        $("#id" + (z + 1)).html(myArray[z]);//used z to avoid name collision with a through p
    } 
}

Is there any way I can use jQuery to do something like the following?

function myFunction2(a, b, c, .......p) {
//Lots of code then
    $("#id1, #id2, ....... #id16").html(a, b, c.......p);
}

My thinking is that each id would be matched with each parameter within the html() statement. I have not found any examples of this in my searches. I don't think this code (if it is possible) would even necessarily be better than the for loop above but it saves a couple of lines, hence the question. Thanks for any answers

Answer 1

If your IDs really are numerically named, you don't need jQuery to shorten things:

function myFunction2(/* don't need the parameter list */) {
  //Lots of code then

  for ( var i = 0; i < arguments.length; ++i )
  {
    document.getElementById( 'id' + (i + 1) ).innerHTML = arguments[i];
  }
}

Or pass in a prefix to use it for different sets of IDs, all depending on the number of parameters passed:

function myFunction2(prefix) {
  //Lots of code then

  for ( var i = 1; i < arguments.length; ++i )
  {
    document.getElementById( prefix + i ).innerHTML = arguments[i];
  }
}

myFunction2('id', "a", "b", "c");  // sets #id1, #id2, #id3 to a, b, c
myFunction2('other", "x", "y");    // sets #other1, #other2 to x, y

Answer 2

function thing() {
    $.each(arguments, function(n, val) {
        $('#id'+ (n+1)).html(val);
    });
}

then

thing('first', 'second', 'third', .... 'millionth')

Answer 3

nope

selector $('#id1, #id2, #id3') returns an array of 3 jQuery objects

calling on them .html(...) applies that function to all selected items

edit:

also know that

var f = function() { console.log(arguments); };

when you call it

f(1,2,3,'a','b','c');

it will return

[1,2,3,'a','b','c']

so you can modify your function2:

function myFunction2() {
    // lots of code then
    for ( var z in arguments ) {
        $( "#id" + (z + 1) ).html( arguments[z] ); // used z to avoid name collision with a through p
    } 
}

good luck!

Answer 4

No, unfortunately the html method only accepts zero or one parameter. You can write a selector which will target various different DOM elements, but they will all be passed the same parameters from your html() call. If you want to get a little creative, you can pass html() a function whose logic can depend on some property or attribute of the parent element, but that's not going to save you many keystrokes in the end.

Answer 5

My solution is similar to @PaulRoub's but in this function you can pass the starting index ( demo ):

function myFunction(start) {
    var i,
        arg = arguments,
        len = arg.length;
    for (i = 1; i < len; i++) {
        $("#id" + (start + i)).html(arg[i]);
    }
}

myFunction( 1, 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j' );