从JS数组呈现标记

Question

这是原始Fiddle:

https://jsfiddle.net/404h0u20/

我正在尝试使用JS来渲染HTML，以遵守DRY的原则。此处：

https://jsfiddle.net/404h0u20/2/

相关代码如下：

$(document).ready(function() {
    $(bars).append("<ol>")
    for (i = 0; i < 9; i++) {
        $(bars).append("<li><a>" + String(amenities[i][0]) + "</a></li>");
    }
    $(bars).append("</ol>")
    $(shopping).append("<ol>")
    for (i = 0; i < 3; i++) {
        $(shopping).append("<li><a>" + String(amenities[i][0]) + "</a></li>");
    }
    $(shopping).append("</ol>")
    $(restaurants).append("<ol>")
    for (i = 0; i < 3; i++) {
        $(restaurants).append("<li><a>" + String(amenities[i][0]) + "</a></li>");
    }
    $(restaurants).append("</ol>")
    $(placesOfInterest).append("<ol>")
    for (i = 0; i < 2; i++) {
        $(placesOfInterest).append("<li><a>" + String(amenities[i][0]) + "</a></li>");
    }
    $(placesOfInterest).append("</ol>")
});

但它并没有创建一个有序的列表，而且从第二个选项卡开始创建了错误的数据？！

任何帮助都将不胜感激！

Answer 1

使用each()和属性选择器尝试一些DRY

  $(document).ready(function() {
           $('.lists').append('<ol>')
           $.each(amenities,function(i,v){
           $('[data-amenity='+v[4]+']').next().find('ol').append("<li><a>" + String(v[0]) + "</a></li>");
           });
        });

https://jsfiddle.net/vobefn04/1/