在使用Jquery插件动态插入项目后，如何将默认过滤器应用于容器？

我正在使用同位素插件。我有一个空容器，我正在向其中添加

$（文档）上的项目。就绪（…

所有这些项目都添加正确，同位素的布局和链接过滤工作正常

但是，我希望能够在将某个项目类附加到容器后直接对其应用过滤器，或者在插入过程中更好地应用过滤器

怎么做

---

若要继续，我有一个“.home”筛选器，我希望在所有项目都附加到容器后应用该筛选器，而无需单击“home”筛选器。

如果您有类似于

<ul id="filters">
    <li><a href="#" data-filter=".home">Show all</a></li>
    <li><a href="#" data-filter=".what">What?</a></li>
    <li><a href="#" data-filter=".when">When?</a></li>
    <li><a href="#" data-filter=".why">Why?</a></li>
    // and so forth...
</ul>

同位素已初始化。请参阅其中的初始视图已过滤，仅显示红色元素

---

更新将初始内容加载到空容器（通过Ajax？）中，您可以使用或隐藏容器，直到所有元素都加载和排序。关于Ajax和成功初始化同位素，请参阅。

您可以使用同位素初始选项

请检查这是基于“”的官方示例

例如：

  <div class="color-shape small round red initial-filter-class"></div>

---

我参加聚会有点晚了，但昨天我在处理同位素问题时遇到了同样的问题，结果以另一种方式解决了

假设我有一组过滤器按钮，很像Systembolaget的功能：

<div id="filters">
  <button data-filter="*">Show all</button>
  <button data-filter=".hidden">Archived</button>
  <button data-filter="*:not(.hidden)">Current</button>
</div>

接下来，我需要初始化我的内容。我已经准备好了我的内容，所以我跳过了这一步，但是如果你计划异步加载内容，你可以使用JavaScript承诺

这是我的一个例子：

下面是我用来设置同位素网格和事件侦听器的函数：

function init() {
  // Initialize isotope and the filter method we want to use
  $grid = $('.grid').isotope({
    itemSelector: '.grid-item',
    filter: function() {
      return filterValue ? $(this).is(filterValue) : true;
    }
  });

  // Event listener for the filter buttons
  $('#filters').on('click', 'button', function() {
    filterValue = $(this).attr('data-filter');

    $(this).addClass('active')
           .siblings().removeClass('active');

    // Refresh the isotope grid to display the filtered items
    $grid.isotope();
  });
} 

一旦定义了promise应该做什么，您就可以初始化同位素网格。您需要将其嵌套在

然后
方法中，以便它仅在promise成功解决后运行。这还允许您设置在内容加载步骤失败时应运行的任何回退

promise.then(function(results) {

  // Function defined in the last code snippet
  return init();

}, function(err) {
  // Error: "Nothing loaded"
  console.log(err); 

  // If you have a banner hidden on the page, you can display it
  $('.message').show();
});

如果你不需要使用承诺（比如我的情况），那么你所需要做的就是：

init();

和-下面的答案在某些方面有帮助吗？很抱歉回答得太晚。非常感谢您的帮助，但很抱歉没有帮助，请参阅下面的评论。您好，很抱歉，这并没有回答我的问题，因为在DeSandro的示例中，项目已经在容器中。在我的情况下，容器是空的，我正在动态添加项目。我将我希望在添加项目时或之后应用筛选器。非常感谢。尽管我建议使用插入方法添加项目（因为预筛选/预排序），查看您的沙盒或摆弄页面如何处理最初为空的#容器将非常有用。您好，您提供的链接中的initisoto函数描述符（请参阅更新）成功了！非常感谢！我没有足够的声望去投票，但我一定会回来增加你的声望，当我被允许的时候。
var promise = new Promise(function(resolve, reject) {
  var content = [];

  // do a thing, possibly async, then…

  if (content.length > 0) {
    resolve(content);
  }
  else {
    reject(Error("Nothing loaded"));
  }
});

function init() {
  // Initialize isotope and the filter method we want to use
  $grid = $('.grid').isotope({
    itemSelector: '.grid-item',
    filter: function() {
      return filterValue ? $(this).is(filterValue) : true;
    }
  });

  // Event listener for the filter buttons
  $('#filters').on('click', 'button', function() {
    filterValue = $(this).attr('data-filter');

    $(this).addClass('active')
           .siblings().removeClass('active');

    // Refresh the isotope grid to display the filtered items
    $grid.isotope();
  });
} 

promise.then(function(results) {

  // Function defined in the last code snippet
  return init();

}, function(err) {
  // Error: "Nothing loaded"
  console.log(err); 

  // If you have a banner hidden on the page, you can display it
  $('.message').show();
});

init();