jQuery мобильный коммутатор между сеткой и видом списка

Question

Я пытаюсь создать функцию jquery, которая переключается между сеткой и макетом списка элементов на моей странице jqm. Вот мой HTML структура:

<div data-role="page" id="portfolio"> 
<div data-role="header"> 
    <a href="#main" data-role="button" data-icon="arrow-l" data-iconpos="notext" data-theme="b" data-inline="true"></a> 
    <h1>Projects</h1> 
    <a href="javascript:changeLayout()" id="changelayout" class="ui-btn-right" data-role="button" data-icon="grid" data-iconpos="notext" data-theme="b" data-inline="true"></a> 
</div> 
<div data-role="content"> 
    <ul id="projects"> 
     <li><a href="#incarpi"><img src="images/incarpi.jpg" ><div class="portfoliotext">Raspberry Pi In-car computer</div></a></li> 

...

и Heres моя функция:

function changeLayout() { 
if ($('#changelayout').attr('data-icon') == 'grid'){ 
    $('#changelayout').attr('data-icon', 'bars'); 
    $('#changelayout .ui-icon').addClass('ui-icon-bars').removeClass('ui-icon-grid'); 
    $('#changelayout').buttonMarkup('refresh'); 
    $('#projects li img').width('100%'); 
    $('#projects li').display('none'); 
    $('.portfoliotext').show(); 
} 
else { 
    $('#changelayout').attr('data-icon', 'grid'); 
    $('#changelayout .ui-icon').addClass('ui-icon-grid').removeClass('ui-icon-bars'); 
    $('#changelayout').buttonMarkup('refresh'); 
    $('#projects li img').width('20%'); 
    $('#projects li').margin('0'); 
    $('#projects li').display('inline-block'); 
    $('.portfoliotext').hide(); 
} 

}

Однако элементы все еще только остаться один на вершине другого. Что я делаю не так?

Thanks

Answer 1

Вы попробовали?

$("#changelayout").attr('data-icon','bars').button().trigger("refresh");        

Или вы также можете сделать это.

$("#changelayout").find(".ui-icon").removeClass("ui-icon-bars").addClass("ui-icon-grid"); 

Answer 2

Рабочий пример: http://jsfiddle.net/Gajotres/PMrDn/

$(document).on('pagebeforeshow', '#index', function(){ 
    $(document).on('click', '#changelayout', function(){    
     if ($('#changelayout').attr('data-icon') == 'grid'){ 
      $('#changelayout').buttonMarkup({ icon: "bars" }); 
      $("#projects li").each(function(index) { 
       $(this).width('100%'); 
       $(this).css('float','clear');    
       $(this).find('.portfoliotext').css('display','none'); 
      });    
     } else { 
      $('#changelayout').buttonMarkup({ icon: "grid" });    
      $("#projects li").each(function(index) {    
       $(this).width('20%'); 
       $(this).css({'float':'left','margin':'0'});       
       $(this).find('.portfoliotext').css('display','block');     
      });       
     } 
    });   
}); 

Я надеюсь, что это он.