$ .each JS多次元OBJ

Question

を使用しての$ .each内私はそうのようないくつかのフッターのコンテンツ用に作成されたオブジェクトを持っている：

var $footerObj = { 
    "one" : { 
     "title" : "One", 
     "links" : { 
      "A" : { 
       "title" : "One A", 
       "url" : "#", 
       "external" : true 
      }, 
      "B" : { 
       "title" : "One B", 
       "url" : "#", 
       "external" : true 
      }, 
      "C" : { 
       "title" : "One C", 
       "url" : "#", 
       "external" : false 
      } 
     } 
    }, 
    "two" : { 
     "title" : "Two", 
     "links" : { 
      "A" : { 
       "title" : "Two A", 
       "url" : "#", 
       "external" : false 
      }, 
      "B" : { 
       "title" : "Two B", 
       "url" : "#", 
       "external" : false 
      } 
     } 
    } 
}; 

私はいくつかのフッターに出力し、これをjQueryの$ .eachを使用しようとしていますリンク。

$.each($footerObj, function(key, value) { 

    $('.footer__links').append('<ul class="footer__list"></ul>'); 

    var $footerList = $('.footer__list'); 

    $.each(value.links, function(subkey, subvalue) { 

     $footerList.append('<li class="footer__item"><a class="footer__link" href="' + subvalue.url + '">' + subvalue.title + '</a></li>'); 

    }); 

}); 

これは私が持っているものですが、これは「2」のデータが2回出力される原因になります。私はそれがvalue.links第二$でだと信じています。それは間違っていますが、私は幸運とすべての異なるバリエーションを試して怒っていた - すべての助けをいただければ幸いです！

おかげ

Answer 1

あなたはそれがそのクラスを持つすべての項目に追加するクラスに追加すると、第二の目的で、など、3があるだろう第三に、そのcalssを持つ2つの、あるでしょうソリューションは、そのクラス名を持つすべての要素の代わりに、そのループで作成した要素に追加することです。代わりに、あなたの外側のeach()ループでこれを行います。

var $footerList = $('<ul class="footer__list"></ul>'); 
$('.footer__links').append($footerList); 

だから、それは次のようになります。

$.each($footerObj, function(key, value) { 

    var $footerList = $('<ul class="footer__list"></ul>'); 

    $('.footer__links').append($footerList); 

    $.each(value.links, function(subkey, subvalue) { 

     $footerList.append('<li class="footer__item"><a class="footer__link" href="' + subvalue.url + '">' + subvalue.title + '</a></li>'); 

    }); 

}); 

Answer 2

$.each 2番目では、あなたの要素を追加する$footerListを呼び出しています。

この変数は、最初の$.eachに設定され、クラスfooter__listを持つすべての要素を取得します。あなたの最初の$.eachの2回目の反復では、あなたはこのように$('.footer__list');は、2つの要素を返し、あなたはそれらの要素の両方にご

'<li class="footer__item"><a class="footer__link" href="' + subvalue.url + '">' + subvalue.title + '</a></li> 

、あなたの<ul>