jQuery code works in Firefox but fails in IE

Question

I have a problem that I can't seem to identify, with a code that works perfectly well in Firefox and Chrome but fails in IE.

I have a sequence of the following elements:

<tbody id="tbod161-1__" isloaded="true" style="display: none;"></tbody>
<tbody id="tbod162-2__" isloaded="true"></tbody>

I am trying to create a jQuery cookie, which stores whether the element is visible or not.

function RememberClickedState() {
$('.ms-listviewtable tbody[id^="tbod"]').each(function(){
    tid = $(this).attr('id');
    var tvisible = ($(this).attr('style') == undefined || $(this).attr('style').indexOf('display: none;') == -1);
    var strVisible;
    if( tvisible == true)
    {
        strVisible = "true";
    }
    if( tvisible == false)
    {
        strVisible = "false";
    }
    items += tid+':'+strVisible+';'
})
$.cookie("itemListState", items);
}

When I retrieve the values with:

string = $.cookie("itemListState");
alert(string);

... all the IDs are set to "true" in IE, that means the values were incorrectly written in the cookie. However, this code works perfect when run in Ff / Chrome where some IDs are correctly set to false.

What am I missing? Thanks,

Answer 1

You could always try :

function RememberClickedState() {
    var items = '';
    $('.ms-listviewtable tbody[id^="tbod"]').each(function(i, e) {
        items += (e.id + ':' + (e.style.display == 'none'));
    });
    $.cookie("itemListState", items);
}​

FIDDLE

There is no seperator between the values, and I would probably add a comma by doing this:

function RememberClickedState() {
    var items = [];
    $('.ms-listviewtable tbody[id^="tbod"]').each(function(i, e) {
        items.push(e.id + ':' + (e.style.display == 'none'));
    });
    $.cookie("itemListState", items.join(', '));
}

FIDDLE

Answer 2

change:

var tvisible = ($(this).attr('style') == undefined || $(this).attr('style').indexOf('display: none;') == -1);

into:

var tvisible = $(this).is(':visible');

and i have improved your code a bit:

function RememberClickedState() {
    $('.ms-listviewtable tbody[id^="tbod"]').each(function(){
        var tvisible = $(this).is(':visible');
        items += $(this).attr('id')+':'+String(tvisible);
    });
    $.cookie("itemListState", items.join('; '));
}