jquery - 简化这个 jQuery 代码？

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 中提取一些数据。

score 1 · Accepted Answer

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

score 1 · Accepted Answer

你可以用它来简化一个 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');
}

score 1 · Accepted Answer

你可以做

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

score 0 · Accepted Answer

这会做同样的事情：

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

score 0 · Accepted Answer

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

为所有相同的图像添加一个类名，例如“my-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]);
});

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

score 0 · Accepted Answer

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

score 0 · Accepted Answer

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

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

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 - 简化这个 jQuery 代码？

7 回答 7

Related

Reference