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

Question

I have got to build a carousel dynamically from two arrays, as follows:

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

To start with, i only have the div class flexslider

I need to build my ul li so that my final html outputs the following:

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

Please note that the first item in arrayBarcode matches with the first item in arrayPath, etc..

Any help would much be appreciated..

Thanks..

Answer 1

Try this

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

Answer 2

Looping through a JavaScript Array is pretty simple. Think about visiting each index of arrays and assign them or a better approach, append to our UL with class slides First answer was good but not enough since using FOR-IN for Arrays is a bad practice, of course you could choose by having all List Items inside a local variable (as Sridhar R 's example) or by append individually.

Here is sample code, didn't tested:

    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

Roughly, it would look as below:

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

Plus, the array arrayPath is missing "":

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