如何从两个数组动态构建 ul li - Jquery

Question

我得从两个数组动态构建一个轮播，如下：

var arrayBarcode = [123456789, 234567891, 345678912];
var arrayPath = [/assets/image1.jpg, /assets/image2.jpg,/assets/image3.jpg];

首先，我只有 div 类 flexslider

我需要构建我的 ul li，以便我的最终 html 输出以下内容：

<div class="flexslider">

<ul class="slides">

    <li ean="123456789">

        <img src="/assets/image1.jpg" alt="pix" draggable="false">

        <a data-statsaction="coupon-basket-remove" data-statscategory="coupon-buttons" title="Remove" href="#">
            <i aria-hidden="true" class="icon icon-close-neg">
                <span class="sr-only">Remove</span>
            </i>
        </a>

    </li>   

    <li ean="234567891">

        <img src="/assets/image2.jpg" alt="pix" draggable="false">

        <a data-statsaction="coupon-basket-remove" data-statscategory="coupon-buttons" title="Remove" href="#">
            <i aria-hidden="true" class="icon icon-close-neg">
                <span class="sr-only">Remove</span>
            </i>
        </a>

    </li>

    <li ean="345678912">

        <img src="/assets/image3.jpg" alt="pix" draggable="false">

        <a data-statsaction="coupon-basket-remove" data-statscategory="coupon-buttons" title="Remove" href="#">
            <i aria-hidden="true" class="icon icon-close-neg">
                <span class="sr-only">Remove</span>
            </i>
        </a>

    </li>

</ul>

请注意，arrayBarcode 中的第一项与 arrayPath 中的第一项匹配，等等。

任何帮助将不胜感激..

谢谢..

Answer 1

遍历 JavaScript 数组非常简单。考虑访问数组的每个索引并分配它们或更好的方法，使用类 slides 附加到我们的 UL 第一个答案很好，但还不够，因为对数组使用 FOR-IN 是一种不好的做法，当然您可以选择将所有 List Items 放在一个局部变量中（如 @ 987654321@ 的示例）或单独附加。

这是示例代码，未经测试：

    var arrayBarcode = [123456789, 234567891, 345678912],
        arrayPath = [/assets/image1.jpg, /assets/image2.jpg,/assets/image3.jpg],
    $slides = $('.slides'); // If only one single class available on your HTML Doc
    if (arrayBarCode.length != arrayPath.length)
    {
     console.log('Both array should be the same size');
     return;
    }

    for (var i = 0; i < arrayBarcode.length; i++)
    {
     var html= '<li ean="' + arrayBarcode[i] + '">\
        <img src="' + arrayPath[i] + '" alt="pix" draggable="false">\
        <a data-statsaction="coupon-basket-remove" data-statscategory="coupon-buttons" title="Remove" href="#">\
            <i aria-hidden="true" class="icon icon-close-neg">\
                <span class="sr-only">Remove</span>\
            </i>\
        </a>\
    </li>';
    $slides.append(html);
}

Answer 2

大致如下：

$('div.flexslider').append('<ul class="slides"></ul>');
var aElement = $('<a data-statsaction="coupon-basket-remove" data-statscategory="coupon-buttons" title="Remove" href="#">
        <i aria-hidden="true" class="icon icon-close-neg">
            <span class="sr-only">Remove</span>
        </i>
    </a>');

$.each(arrayBarcode, function(index, value){
     var liElement = $('<li></li>').attr('ean', value);
     var imgElement = $('<img alt="pix" draggable="false">').attr('src', arrayPath[index]);
     liElement.append(imgElement).append(aElement.clone());
     $('ui.slides').append(liElement);
});

另外，数组arrayPath缺少“”：

var arrayPath = ['/assets/image1.jpg', '/assets/image2.jpg','/assets/image3.jpg'];

Answer 3

试试这个

var arrayBarcode = [123456789, 234567891, 345678912];
var arrayPath = ['/assets/image1.jpg', '/assets/image2.jpg','/assets/image3.jpg'];

var output='<ul class="slides">';
for(var i in arrayBarcode)
{
    output+='<li ean="'+arrayBarcode[i]+'">\
        <img src="'+arrayPath[i]+'" alt="pix" draggable="false">\
        <a data-statsaction="coupon-basket-remove" data-statscategory="coupon-buttons"\ title="Remove" href="#">\
            <i aria-hidden="true" class="icon icon-close-neg">\
                <span class="sr-only">Remove</span>\
            </i>\
        </a>\
     </li>';
}
output+='</ul>';
$('.flexslider').empty().append(output);

DEMO