Using jQuery's end() Function

HTML

Click a name to see details:
<br />
<div id="divContainer"></div>
<br />
<div id="divCustDetails">
    Name: <span id="Name"></span>
    <br />
    City: <span id="City"></span>
    <br />
    State: <span id="State"></span>
</div>

CSS

.cust { width:200px;cursor:pointer;}
.cust:nth-child(even) { background-color:#efefef;}
.cost:nth-child(odd) { background-color:#fff;}

JavaScript

$(document).ready(function () {
    var custs = getCustomerData();

    for (var i = 0; i < custs.length; i++) {
        var cust = custs[i];
        $('<div class="cust"><span /></div>')
            .find('span') //get to span
                .attr('title', cust.City)
                .data(cust)
                .html(cust.Name)
                .click(showCust)
            .end() //get back to span's parent div
            .appendTo('#divContainer');
    }
});

function showCust() {
    var spanCust = $(this).data();
    //Iterate through object literal properties and write out values
    for (var key in spanCust) {
        var $node = $('#' + key);
        if ($node.length > 0) {
            $node.html(spanCust[key]);
        }
    }
}

function getCustomerData() {
    return [
                { ID: 1, Name: 'John', City: 'Scottsdale', State: 'AZ' },
                { ID: 2, Name: 'Jane', City: 'Chandler', State: 'AZ' },
                { ID: 3, Name: 'Michelle', City: 'San Diego', State: 'CA' },
                { ID: 4, Name: 'James', City: 'Portland', State: 'OR' },
                { ID: 5, Name: 'Tom', City: 'Dallas', State: 'TX' },
            ];
}