Упростить этот код 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.

Answer 1

Вы можете сделать

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

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 4

В интересах создания чего-то другого, ориентированного на данные, а не на код, вот другой подход.

Вы также можете использовать эту служебную функцию для извлечения данных любого типа из последовательных идентификаторов и для указания большего количества объектов с различными данными для извлечения, просто добавьте новую строку в таблицу.

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 для вызова, аргумент для этого метода, первый номер для получения, последний номер для получения и целевой массив для хранения данных) и функция просто перебирает таблицу, работающую с каждым типом объекта.

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

Это будет делать то же самое:

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