`失敗`類添加到jQuery中的MixItUp容器

Question

有人可以請幫忙解釋爲什麼this工作，但this example不？

除了HTML之外，我沒有看到任何真正的區別，但我不會想象這會打破它。還是呢？

每次運行第二個腳本時，MixItUp都會將fail添加到我的board-list類中。

字符限制意味着我不能在這裏添加我的JS，但您可以在我的Demo/FIDDLE中找到它。

我的代碼：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="http://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js?v=2.1.2"></script> 
 

 
<!-- The buttons --> 
 
<ul> 
 
    <li> 
 
     <button class="btn-boo filter no-border" data-filter=".social"> Future</button> 
 
    </li> 
 
    <li> 
 
     <button class="btn-boo filter no-border" data-filter=".mainboard"> Mainboard</button> 
 
    </li> 
 
    <li> 
 
     <button class="btn-boo filter no-border" data-filter=".new-faces"> New Faces</button> 
 
    </li> 
 
</ul> 
 

 
<!-- The grid --> 
 
<!-- Board Pictures --> 
 
<div class="board-bloc"> 
 
    <div class="board-container"> 
 
     <ul id="models-cnt" class="board-list"> 
 

 
      <!-- Board Item --> 
 
      <li class="board-item new-faces"> 
 

 
       <a class="no-border board-item-image-link" href="#"> 
 
        <div class="board-social-details"> 
 
         <ul class="board-social-icons"> 
 
          <li><img class="board-social-fb" src="img/social-facebook-white.svg" alt="Facebook Icon"></li> 
 
          <li><img class="board-social-tw" src="img/social-twitter-white.svg" alt="Twitter Icon"></li> 
 
          <li><img class="board-social-in" src="img/social-instagram-white.svg" alt="Instagram Icon"></li> 
 
         </ul> 
 

 
         <p class="board-social-count">4.5K</p> 
 
        </div> 
 

 
        <img class="board-item-image" src="http://placehold.it/200x200" alt="Model Thumb"> 
 
       </a> 
 

 
       <div class="board-info"> 
 
        <p class="board-name"><a class="no-border" href="#">Adriana Bucur</a></p> 
 
        <span class="board-favourite-star"><a class="no-border" href="#"><img src="img/favourite-star.svg" alt="Favourite"></a></span> 
 
        <span class="board-favourite-star item-favourited"><a class="no-border" href="#"><img src="img/favourite-star-full.svg" alt="Favourite"></a></span> 
 
       </div> 
 
      </li> 
 
      <!-- Board Item End --> 
 

 
      <!-- Board Item --> 
 
      <li class="board-item mainboard"> 
 

 
       <a class="no-border board-item-image-link" href="#"> 
 
        <div class="board-social-details"> 
 
         <ul class="board-social-icons"> 
 
          <li><img class="board-social-fb" src="img/social-facebook-white.svg" alt="Facebook Icon"></li> 
 
          <li><img class="board-social-tw" src="img/social-twitter-white.svg" alt="Twitter Icon"></li> 
 
          <li><img class="board-social-in" src="img/social-instagram-white.svg" alt="Instagram Icon"></li> 
 
         </ul> 
 

 
         <p class="board-social-count">4.5K</p> 
 
        </div> 
 

 
        <img class="board-item-image" src="http://placehold.it/200x200" alt="Model Thumb"> 
 
       </a> 
 

 
       <div class="board-info"> 
 
        <p class="board-name"><a class="no-border" href="#">Adriana Bucur</a></p> 
 
        <span class="board-favourite-star"><a class="no-border" href="#"><img src="img/favourite-star.svg" alt="Favourite"></a></span> 
 
        <span class="board-favourite-star item-favourited"><a class="no-border" href="#"><img src="img/favourite-star-full.svg" alt="Favourite"></a></span> 
 
       </div> 
 
      </li> 
 
      <!-- Board Item End --> 
 

 
     </ul> 
 
    </div> 
 
</div> 
 
<!-- Board Pictures End -->

Answer 1

它tryes找塊與mix -class，但它不能。我已經修好了你的小提琴https://jsfiddle.net/br3t/hq2j17yp/10/