Test jQuery data chaining

by beebul

HTML

<div id="data-store-1" class="data-store">1</div>
<div id="data-store-2" class="data-store">2</div>
<div id="data-store-3" class="data-store">3</div>

<output id="output"></output>

CSS

.data-store,
#output
{
    display: inline-block;
    text-align: center;
    width: 50px;
    line-height: 50px;
    border: 10px solid cyan;
    margin: 10px;
}

.data-store
{
    border-color: red;
}

#output
{
    border-color: green;
}

JavaScript

$(function() {
    var $d1 = $('#data-store-1'),
        $d2 = $('#data-store-2'),
        $d3 = $('#data-store-3'),
        $ds = $('.data-store'),
        $output = $('#output')
        tag = 'data-store-tag',
        output;

    // Store different values
    $d1.data(tag, 1);
    $d2.data(tag, 2);
    $d3.data(tag, 3);
    
    // Get data from multiple objects at the same time.
    // Returns only the value from the first element in the jQuery object.
    // http://api.jquery.com/data/#data2
    output = $ds.data(tag);
    $output.text(output);
});