如何從兩個數組動態構建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

嘗試這個

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);

演示

Answer 2

遍歷JavaScript數組非常簡單。 想想訪問陣列的每個索引，並將它們分配或一個更好的方法，追加到我們的UL帶班滑第一個答案是好的，但還不夠，因為使用FOR-IN的陣列是一種不好的做法，當然你可以通過使所有列表中選擇局部變量內的項目 （如Sridhar R的示例）或單獨追加。

這是示例代碼，未經測試：

    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 3

大致來說，如下所示：

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