如何通过jQuery替换网格列表视图？

我有一个Pinterest风格的网格视图，我需要用一个按钮单击（反之亦然当点击网格按钮时）用表格视图替换网格（如下所示）。如何通过jQuery替换网格列表视图？

我查了一下，但找不到任何不错的例子或文档。所以我不知道如何去做。任何帮助深表感谢。

HTML：按钮

<a id="#grid"><i class="fa fa-th-large" aria-hidden="true"></i></a> 
<a id="#list"><i class="fa fa-list" aria-hidden="true"></i></a>

JS：切换从网格中的数据列出，反之亦然

$(document).ready(function() { 
    $('#list').click(function(event){event.preventDefault();$('.pinGrid .pin').addClass('list-items');}); 
    $('#grid').click(function(event){event.preventDefault();$('.pinGrid .pin').removeClass('list-items');$('.pinGrid .pin').addClass('');}); 
});

HTML：Pinterest的

<div class="child_vac pin" id=""> 
    <div class="pull-right intrest-box"> 
     <input type="checkbox" class="faChkRnd like" name=""></div> 
    <p class="pull-left">date</p> 
     <h2 class="job-title text-center"> </h2> 
     <p class="info-text text-center" ><b></b></p><p class="box-requirements"> 

     </p> 
     <div class="text-center"> 
     <p class="card-title"> <a href="#moreinfo" data-id="" class="moreinfo">More Information</a></p> 
     </div> 
    </div>

FIDDLE

来源

2016-04-26 Kez