Question

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

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

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

为所有相同的图像添加类名，例如“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 6

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 7

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

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

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，要获取的第一个数字，要获取的最后一个数字以及用于存储数据的目标数组）和该函数只是迭代遍历每种类型对象的表。

简化这个jQuery代码？

7 个答案: