简化这个jQuery代码？

问题描述：

我敢肯定有一种方法来缩短这个，但我不知道怎么办。简化这个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。

可能想了解如何在JavaScript中使用'for'循环：https：//developer.mozilla.org/en/A_re-introduction_to_JavaScript#Control_structures（请参阅'for'循环部分）。您可以使用'for'循环遍历所有这些行......而不是手动使用索引（即1,2,3,4等），您可以使用循环变量（通常是'i'，）来替换那些数字。 – summea 2012-02-21 23:53:05

答

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

谢谢，它效果很好。 – user1189771 2012-02-22 00:13:50

答

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

答

这将做同样的：第一

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

答

第一件事，我们将只使用您的图片的例子。

添加一个类名是一样的，像“我的图像”的所有图像。

然后使用图像类名来在一个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只是用于遍历容易多个元素，并能够操纵的每个元素与精度。每个方法。

答

你可以做

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

+1表示卓越的可读性因子。 – summea 2012-02-22 00:04:48

这不会将数组放入从零索引开始的数组中，而不是像原始代码中的索引那样？此外，这不会消除可能在预先创建的数组中的任何其他内容吗？ – jfriend00 2012-02-22 00:07:43

@ jfriend00，是这个代码初始化数组以及.. – 2012-02-22 00:12:05

答

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

答

在做不同的这是数据驱动的，而不是在这里驱动的另一种方法的代码的东西的兴趣。

您也可以使用这个效用函数来获取任何种类从顺序标识数据，并指定不同的数据来获取更多的对象，你只需要添加一个新行到表中。

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代码？

相关推荐