アイソトープとブートストラップ3：コンテンツdivはソート時に消えます

Question

これはかなりシンプルでなければなりませんが、私は困惑しています。

divsはソート時に消えます。

そして、私は正しいdata-filterが不足していますか？またはdisplay:noneまたはdisplay:block？

Codepen：http://codepen.io/anon/pen/oYXXPq（あなたが変更を加えるためにそれをクローンすることができます。）

HTML：

<ul id="filters"> 
    <li><a href="#" data-filter="*">Everything</a></li> 
<li><a href="#" data-filter="blog">Blog</a></li> 
<li><a href="#" data-filter="ciso">CISO</a></li> 
<li><a href="#" data-filter="labs">LABS</a></li> 
</ul> 

<div class="container-fluid"> 
    <div id="isotope-blog"> 
    <div class="grid"> 
    <div class="grid-sizer col-xs-12 col-md-6"></div> 
    <div class="grid-item item col-xs-12 col-md-6"> 
     <div class="grid-item-content blog">Blog Blog Blog</div> 
    </div> 
    <div class="grid-item item col-xs-12 col-md-6"> 
     <div class="grid-item-content blog">Blog Blog Blog</div> 
    </div> 
    <div class="grid-item item col-xs-12 col-md-6"> 
     <div class="grid-item-content ciso">CISO CISO CISO</div> 
    </div> 
    <div class="grid-item item col-xs-12 col-md-6"> 
     <div class="grid-item-content labs">LABS LABS LABS</div> 
    </div> 
    <div class="grid-item item col-xs-12 col-md-6"> 
     <div class="grid-item-content labs">LABS LABS LABS</div> 
    </div> 
    <div class="grid-item item col-xs-12 col-md-6"> 
     <div class="grid-item-content labs">LABS LABS LABS</div> 
    </div> 
    <div class="grid-item item col-xs-12 col-md-6"> 
     <div class="grid-item-content ciso">CISO CISO CISO</div> 
    </div><div class="grid-item item col-xs-12 col-md-6"> 
     <div class="grid-item-content security-blog">BLOG BLOG BLOG</div> 
    </div> 
    </div> 
    </div> 
</div> 

CSS：

.grid-item-content { 
    max-height: 120px; 
    background: #0D8; 
    border: 2px solid #000; 
    overflow:hidden; 
} 

.container-fluid { 
max-width:1200px; 
} 

のjQuery：

jQuery(function ($) { 

    var $container = $('#isotope-blog'); //The ID for the list with all the blog posts 
    $container.isotope({ //Isotope options, 'item' matches the class in the PHP 
     itemSelector : '.item', 
     layoutMode : 'masonry' 
    }); 

    //Add the class selected to the item that is clicked, and remove from the others 
    var $optionSets = $('#filters'), 
    $optionLinks = $optionSets.find('a'); 

    $optionLinks.click(function(){ 
    var $this = $(this); 
    // don't proceed if already selected 
    if ($this.hasClass('selected')) { 
     return false; 
    } 
    var $optionSet = $this.parents('#filters'); 
    $optionSets.find('.selected').removeClass('selected'); 
    $this.addClass('selected'); 

    //When an item is clicked, sort the items. 
    var selector = $(this).attr('data-filter'); 
    $container.isotope({ filter: selector }); 

    return false; 
    }); 

}); 

Answer 1

これが機能するようになりました：http://codepen.io/anon/pen/oYXXPq

それはgrid-item div要素内のフィルタクラスによってソート2つの列石積みとブートストラップのレイアウトです。フィルタクラスは、複数の異なるクラスにすることができます。

問題があった。

マイHTMLマークアップはあまりにも複雑で、間違っていました。それは形式にする必要があります：

<div class="container"> 

    <div class="isotope-list"> 

    <div class="row"> 

     <div class="grid-item blog">OneOneOneOne Blog Blog Blog</div> 

     <div class="grid-item blog">TwoTwoToTwoTwoTwo Blog Blog Blog </div> 

and on and on... 

</div> 
    </div> 

CSSに必要な小さな変化がありました。

そして、私のJavascriptを選択したカテゴリへの更新を行い、クリアするために必要な：

var selectedCategory; 

var $grid = $('.isotope-list').isotope({ 
    itemSelector: '.grid-item', 
    masonry: { 
    columnWidth: 160, 
    gutter: 20 
    }, 
    getSortData: { 
    selectedCategory: function(itemElem) { 
     return $(itemElem).hasClass(selectedCategory) ? 0 : 1; 
    } 
    } 
}); 

var $items = $('.row').find('.grid-item'); 

$('.sort-button-group').on('click', '.button', function() { 
    // set selectedCategory 
    selectedCategory = $(this).attr('data-category'); 
    if (selectedCategory == 'all') { 
    $grid.isotope({ 
     sortBy: 'original-order' 
    }); 

    } 

    // update sort data now that selectedCategory has changed 
    $grid.isotope('updateSortData'); 
    $grid.isotope({ sortBy: 'selectedCategory' }); 
}); 

    // change is-checked class on buttons 
$('.button-group').each(function(i, buttonGroup) { 
    var $buttonGroup = $(buttonGroup); 
    $buttonGroup.on('click', 'button', function() { 
    $buttonGroup.find('.is-checked').removeClass('is-checked'); 
    $(this).addClass('is-checked'); 
    }); 
});