Question

在我的网站上，我有两个连续几个javascript innerHTML语句的函数，如下所示：

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
}

第一个函数有七行七个参数，第二个函数有16行16个参数。我理解（如果我使用jQuery，并使用数字约定命名每个id，请参见下文）我可以按如下方式缩短此代码（函数2作为示例）：

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
    } 
}

有什么方法可以使用jQuery来执行以下操作？

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

我的想法是每个id都与html（）语句中的每个参数匹配。我在搜索中没有找到任何这方面的例子。我不认为这段代码（如果可能的话）甚至可能比上面的for循环更好，但它节省了几行，因此问题。谢谢你的回答

Answer 1

如果您的ID确实以数字命名，那么您不需要jQuery来缩短内容：

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];
  }
}

或传入一个前缀，将其用于不同的ID集合，所有这些都取决于传递的参数数量：

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);
    });
}

然后

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

Answer 3

没了

selector $（＆＃39;＃id1，＃id2，＃id3＆＃39;）返回一个包含3个jQuery对象的数组

调用它们.html（...）将该功能应用于所有选定的项目

编辑：

也知道

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

当你打电话时

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

它会返回

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

所以你可以修改你的功能2：

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
    } 
}

祝你好运！

Answer 4

不，不幸的是html方法只接受零个或一个参数。你可以编写一个选择器，它将针对各种不同的DOM元素，但它们都将从你的html（）调用中传递相同的参数。如果你想获得一点创意，可以传递html（）一个函数，其逻辑可以依赖于父元素的某些属性或属性，但这最终不会为你节省很多击键。

Answer 5

我的解决方案类似于@PaulRoub，但在此功能中您可以传递起始索引（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' );

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

5 个答案: