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

できるよ

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

まず最初に、例としてあなたの画像だけを使用します。

「my-images」のように、すべての画像に同じクラス名を追加します。

次に、画像クラス名を使用して、1 回の 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

これは同じことをします：

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

コード駆動型ではなくデータ駆動型の別のことを行うために、別のアプローチを示します。

また、このユーティリティ関数を使用して、連続した識別子からあらゆる種類のデータを取得したり、取得するデータが異なる複数のオブジェクトを指定したりできます。テーブルに新しい行を追加するだけです。

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 メソッド名、そのメソッドの引数、取得する最初の番号、取得する最後の番号、データを格納する宛先配列) を入力するだけです。各タイプのオブジェクトで動作するテーブルを反復処理します。

jquery - この jQuery コードを簡素化しますか?

7 に答える 7

Related

Reference