Setting a large number of element attributes, also appending

by alano

HTML

<ul id="listItems"></ul>

JavaScript

$(document).ready(function() {
    var $list = $("ul#listItems");
    $.each(items, function (idx, item) {
        $("<li>", item.props).appendTo($list);
    });
});


//test data in JSON-ish format...
var items = [
    { props: { text: "jw", "data-locale": "en-US", "class": "my-item", title: "This is the li for jw" }},
    { props: { text: "John", "data-locale": "en-US", "class": "my-item", title: "This is the li for John" }},
    { props: { text: "Alan", "data-locale": "en-GB", "class": "my-item", title: "This is the li for Alan" }}
]; //note "class" must be wrapped in quotes if adding it dynamically