Question

这是最初的小提琴：

我正在尝试使用JS来呈现HTML以遵循DRY的原则。这里：

相关代码如下：

$(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/

从JS数组渲染标记

1 个答案: