Verifying that new jQuery can't select data

Testing how to select elements with jQuery by looking for the data-attribute. For StackOverflow question - http://stackoverflow.com/questions/2487747/selecting-element-by-data-attribute

by drzaus

HTML

<div id="test">
    <h1>Test Stuff</h1>
    
    <div id="item1">Item 1</div>
    <div id="item2">Item 2</div>
</div>

<div id="results">
    <h1>Results</h1>
</div>

CSS

h1 { font-weight:bold; font-size:120%; text-decoration:underline; }

JavaScript

var $container = $('#test')
    , $results = $('#results')
    ;

// add html attribute
var $item1 = $('#item1').attr('data-generated', true);

// add as data
var $item2 = $('#item2').data('generated', true);

// create item, add data attribute via jquery
var $item3 = $('<div />', {id: 'item3', data: { generated: 'true' }, text: 'Item 3' });
$container.append($item3);

// create item, "manually" add data attribute
var $item4 = $('<div id="item4" data-generated="true">Item 4</div>');
$container.append($item4);

// search for item using solution http://stackoverflow.com/a/2487751/1037948, "wrong"
var $result = $container.find('[data-generated="true"]');  // only returns $item1 and $item4

var assert = [];
for(var i = 1; i <= 4; i++) {
    assert.push($result.is('#item' + i));
}
    
function _log(i,o) {
    if(window.console && console.log) console.log(i,o);
}

// "debug output" results visually
$result.each(function(i,o){
    _log(i,o);
    $results.append( $(o).clone() );
});

 $.each(assert, function(i,o) {
     _log(i,o);
     $results.append('<div>Assert #item' + (i+1) + ': ' + o + '</div>');
 });