使用$。每$。每个内JS多维OBJ

我有一些页脚内容创建像这样的对象：

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($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>'); 

    }); 

});

这就是我所拥有的，但这会导致“two”中的数据输出两次。我相信这是value.links在第二个$ .each这是错误的，但我一直在疯狂尝试所有不同的变化，没有运气 - 任何帮助将不胜感激！

感谢

来源

2016-11-14 Max Henchman

当您添加到一个类将追加到具有一流的，在第二对象上的每个项目，将有两个与CALSS，第三会有三个等。解决方案是追加到您在该循环中创建的那个，而不是具有该类名称的每个元素。在你的外循环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>'); 

    }); 

});

来源

2016-11-14 15:35:59

啊，是的，我很确定value.links是错的，我完全忽略了这一点。谢谢你，工作！ –

在你的第二个$.each您致电$footerList你的元素追加。

此变量设置在第一个$.each中，并检索类别为footer__list的所有元素。关于你的第$.each的第二次迭代，你将有两个

<ul class="footer__list"></ul>

因此$('.footer__list');将返回2个元素，你会追加你

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

到这两个元素，您的两个<ul>

来源

2016-11-14 15:39:47 Weedoze

使用$。每$。每个内JS多维OBJ

回答

相关问题