简化这个jQuery代码？

我很确定有一种方法可以缩短它，但我不知道如何。

img[1] = $('#img1').attr('src'); img[2] = $('#img2').attr('src'); img[3] = $('#img3').attr('src'); img[4] = $('#img4').attr('src'); title[1] = $('#title1').text(); title[2] = $('#title2').text(); title[3] = $('#title3').text(); title[4] = $('#title4').text(); desc[1] = $('#description1').attr('value'); desc[2] = $('#description2').attr('value'); desc[3] = $('#description3').attr('value'); desc[4] = $('#description4').attr('value'); url[1] = $('#url1').attr('value'); url[2] = $('#url2').attr('value'); url[3] = $('#url3').attr('value'); url[4] = $('#url4').attr('value'); 

已经创建了数组，我只是决定将它们排除在外，因为这里并不需要它。 我只是基本上把一些数据拉到了DOM上。

Answer 1

 for(i=1;i<=4;i++) { img[i] = $('#img'+i).attr('src'); title[i] = $('#title'+i).text(); desc[i] = $('#description'+i).attr('value'); url[i] = $('#url'+i).attr('value'); } 

Answer 2

你可以用它来简化for循环，例如

 for(i = 1; i < 5; i++) { img[i] = $('#img' + i).attr('src'); title[i] = $('#title' + i).text(); desc[i] = $i'#description' + i).attr('value'); url[i] = $("#url' + i).attr('value'); } 

Answer 3

你可以做

 img = $('#img1, #img2, #img3, #img4') .map(function(){ return this.src; }) .get(); title = $('#title1, #title2, #title3, #title4') .map(function(){ return $(this).text(); }) .get(); desc = $('#description1, #description2, #description3, #description4') .map(function(){ return this.value; }) .get(); url = $('#url1, #url2, #url3, #url4') .map(function(){ return this.value; }) .get(); 

但最好还是为每个组添加一个类，并使用它来定位元素。

 img = $('.img') .map(function(){ return this.src; }) .get(); title = $('.title') .map(function(){ return $(this).text(); }) .get(); desc = $('.description') .map(function(){ return this.value; }) .get(); url = $('.url') .map(function(){ return this.value; }) .get(); 

---

拉伸它

现在，如果你想自动化这个，你可以做更多

 jQuery.fn.propAsArray = function(property){ return this.map(function(){ if (jQuery.fn[property]){ return $(this)[property](); } else { return $(this).prop(property); } }).get(); } 

并像这样使用它

 img = $('.img').propAsArray('src'); title = $('.title').propAsArray('text'); desc = $('.description').propAsArray('value'); url = $('.url').propAsArray('text'); 

Answer 4

这样做会是这样的：

 for (var i = 1; i <= 4; i++) { img[i] = $('#img' + i).attr('src'); title[i] = $('#title' + i).text(); desc[i] = $('#description' + i).attr('value'); url[i] = $('#url' + i).attr('value'); } 

Answer 5

 var data = new Array(); for (var i=1; i<5; i++) { data[i-1] = { img: $('#img' + i).attr('src'), title: $('#title' + i).text(), desc: ${'#description' + i).attr('value'), url: $('#url' + i).attr('value') }; } 

Answer 6

首先，我们将仅使用您的图像。

为所有相同的图像添加类名，例如“my-images”。

然后使用images类名称在一个jQuery调用中调用每个图像，并执行您需要的操作。

例

 $(".my-images").each(function(i) { // i is an integer representing the elements index // Here you can manipulate this element all you need, add classes, // add inner elements, remove items, change properties... // // below i'm simply console loggin the images existing src link console.log( $(this).attr("src") ); // or to set the src from a matching array of links $(this).attr("src", araUrls[i]); }); 

或者您可以使用其他人建议的循环，并一次操作数据，可能更复杂。 但是，jQuery设计了.each方法，只是为了轻松迭代多个元素，并能够精确地操作每个元素。

Answer 7

为了做一些不同的事情，那就是数据驱动而不是代码驱动，这是另一种方法。

您还可以使用此实用程序function从顺序标识符中检索任何类型的数据，并指定具有不同数据的更多对象以进行检索，您只需向表中添加新行。

 function getDataFromDom(spec) { var item; for (var i = 0; i < spec.length; i++) { item = spec[i]; for (var j = item.start, stop = item.last; j <= stop; j++) { item.dest[j] = $(item.selBase + j)[item.method](item.arg); } } } var whatData = [ {selBase: "#img", method: "attr", arg: "src", first: 1, last: 4, dest: img}, {selBase: "#title", method: "text", arg: undefined, first: 1, last: 4, dest: title}, {selBase: "#description", method: "attr", arg: "value", first: 1, last: 4, dest: desc}, {selBase: "#url", method: "attr", arg: "value", first: 1, last: 4, dest: url} ]; getDataFromDOM(whatData); 

您只需为表中的每个对象类型填充各种参数（选择器库，要调用的jQuery方法名称，该方法的arg，要获取的第一个数字，要获取的最后一个数字以及用于存储数据的目标数组）以及函数遍历对每种类型对象进行操作的表。