その要素内のクラスとコンテンツのすべてのインスタンスからオブジェクトを作成

Question

私はクラスのすべてのインスタンスを実行し、IDを取得し、関連する日数と値を取得する関数を構築していますidキーだから、例えば次のように

{ 
    { 
     id: 1, 
     info: { 
      days: "5 days", 
      price: "£300" 
     } 
    }, 
    { 
     id: 2, 
     info: { 
      days: "9 days", 
      price: "£500" 
     } 
    } 
} 

機能はあるが、最後のインスタンスのみのためにそれを行うようだとの日や価格を返さない：あなたがしようとしているデータ構造

function sortTrips() { 
    let tripObj = {}; 
    $('.tab#top10 .col-md-4').each(function(index, obj) { 
     tripObj.id = $(this).attr('id'); 
     tripObj.id.info.days = $(this).find('.days').html(); 
     tripObj.id.info.price = $(this).find('.price').html(); 
    }); 
    console.log(tripObj); 
} 

Answer 1

まずビルドするのは無効です。匿名のネストされたオブジェクトを持つことはできません。オブジェクトの配列は、あなたがしようとしているものに対して最も有効な解決策のようです。

第2に、まだ存在しないinfoオブジェクトに設定しようとしているため、daysとpriceは見逃されています。

あなたは両方の問題を解決し、このように、map()を使用してコードを整理することができます

function sortTrips() { 
 
    var tripObj = $('.tab#top10 .col-md-4').map(function() { 
 
    return { 
 
     id: this.id, 
 
     info: { 
 
     days: $(this).find('.days').html(), 
 
     price: $(this).find('.price').html() 
 
     } 
 
    } 
 
    }).get(); 
 
    
 
    console.log(tripObj); 
 
} 
 

 
sortTrips();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="tab" id="top10"> 
 
    <div class="col-md-4" id="foo"> 
 
     <div class="days">5 days</div> 
 
     <div class="price">£300</div> 
 
    </div> 
 
    <div class="col-md-4" id="bar"> 
 
     <div class="days">9 days</div> 
 
     <div class="price">£500</div> 
 
    </div> 
 
    <div class="col-md-4" id="fizz"> 
 
     <div class="days">6 days</div> 
 
     <div class="price">£600</div> 
 
    </div> 
 
</div>