HTMLにある未定数のclassなどを広い、JSで配列に入れる方法

Question

対象のHTMLにあるclassとidを拾って、目的のJSにあるvar ytDataに入れたいのですが、JSはどのように書けばよろしいでしょうか？

###対象のHTML
まずこのようなHTMLがあります。拾いたいのは、「.ytBox」から「xxx1」と「sample1」のペアです。

<div id="contents">
  <div class="ytBox" id="xxx1">
    <div id="sample1" class="area"></div>
  </div>
  <div class="ytBox" id="xxx72">
    <div id="sample2" class="area"></div>
  </div>
  <div class="ytBox" id="xxx35">
    <div id="sample3" class="area"></div>
  </div>
</div>
<!-- .ytBoxはいくつになるか不明 -->

###目的のJS
上のHTMLから拾った情報を、下記のコメントのように入れるのが目的です。

var ytData = [
  {
    id: 'ここに「xxx1」を入れたい',
    area: 'ここに「sample1」を入れたい'
  }, {
    id: 'ここに「xxx72」を入れたい',
    area: 'ここに「sample2」を入れたい'
  }, {
    id: 'ここに「xxx35」を入れたい',
    area: 'ここに「sample3」を入れたい'
  }
  //以下、HTMLの .ytBox が増えるたびに同様に追加されていく
];

###試したJS
イメージとしてはこのような感じですが、案の定と言いますか…、目的は達成できませんでした。

var ytIds = [];
var ytAreas = [];
$('.ytBox').each(function() {
    var ytId = $(this).attr('id');
    var ytArea = $(this).children('.area').attr('id');
    ytIds.push(ytId);
    ytAreas.push(ytArea);  
});

var ytData = [
  {
    id: ytIds[0],
    area: ytAreas[0]
  }, {
    id: ytIds[1],
    area: ytAreas[1]
  }, {
    id: ytIds[2],
    area: ytAreas[2]
  }
];

###補足
補足させて頂きます。
上の質問の「id」や「area」は動画情報です。
現状の動画のコードはこうなっていて（https://jsfiddle.net/38r9tmzo/43/）、これですとJSに「ID」と「area」が書かれています。
今回はこの「id」と「area」をJSでなくHTMLに書き、JSでそれを取得したいと考えたために質問致しました。
なので構造は上の質問の通りなのですが、全体的な整合性についても鑑みる必要があるかもしれません。ということを補足させて頂きます。

Comments

[kei344]

「area」はどこから出てきたのでしょう。また、class名が変わるだけで構造は変わらないのでしょうか。

[eaconian]

失礼致しました。「.area」をHTMLに追記しました。また、補足（構造についての説明）の整合性のため、全体的な名称を変更させて頂きました。

Answer 1

やりたいことこれであってますか？

var data = [];
$('.list').each(function() {
    var fst = $(this).children('div').attr('class').replace('content_', '');
    var snd = $(this).find('div > div').attr('id');
    data.push({
      fst: fst,
      snd: snd
    });
});

console.log(data);

ただしこの場合、content_xxx1のようなclassがついている要素に他のclassがついている場合に取得したい値が取れないですが。

Comments

[eaconian]

ありがとうございます。eachで配列に入れる場合はそのように書くのですね。勉強になりました。

[eaconian]

他のクラスがついている場合の問題は、クラスでなくdata属性にして回避できそうです。ありがとうございました。