jQuery可以縮短一系列innerHTML語句嗎？

在我的網站，我有兩個功能，象這樣幾個連續的JavaScript的innerHTML聲明：jQuery可以縮短一系列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循環更好，但是它節省了幾行代碼，因此是個問題。感謝您的任何回答

來源

2014-07-08 The One and Only ChemistryBlob

你是如何調用該函數？如果你可以傳入數組，事情可能會更簡單。見Douglas Crockford。另外，如果一個函數具有「大量代碼」，它可能會更好地分解成幾個更小的函數。 – isherwood

我會堅持使用for循環。即使有可能做你提出的建議，試圖在兩個單獨的列表中排列16個元素看起來像是一個維護噩夢。。。 – ernie

您可以幾乎與第三個例子完全相同。只需要像下面這樣將一個函數傳遞給'.html（）'：var a = arguments; $（「＃id1，＃id2，...＃id16」）。html（function（i）{return a [i]}）;' –

沒了

選擇$（ '＃ID1，ID2＃，＃ID3'）返回3的jQuery對象的數組

呼籲他們的.html（...）該功能適用於所有選擇項目

編輯：

也知道

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

當你卡l在

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

好運！

來源

2014-07-08 21:21:06 Prozi

'$（'＃id1，＃id2，＃id3'）'doesn不返回3個jQuery對象的數組。它返回一個包含3個DOM元素的jQuery對象。 –

不，不幸的是，html方法只接受零或一個參數。你可以可以編寫一個選擇器，它將定位各種不同的DOM元素，但它們將全部從你的html（）調用中傳遞相同的參數。如果你想獲得一點創意，你可以傳遞一個函數html（），該函數的邏輯可以取決於父元素的某些屬性或屬性，但最終不會爲你節省很多擊鍵。

來源

2014-07-08 21:19:59 oliakaoil

如果您的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

來源

2014-07-08 21:22:27

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

然後

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

來源

2014-07-08 21:23:08 tester

我的解決方案是類似於@ 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');

來源

2014-07-08 21:27:18 Mottie

哎呀，我想我傳遞一個數組作爲第二個參數。 – Mottie

更新了我的答案和演示。 – Mottie

jQuery可以縮短一系列innerHTML語句嗎？

回答

相關問題