显示具有特定类别 jQuery 的产品

问：

我有通过 API 获得的产品，我尝试使用 jQuery 创建目录。我使用两个不同的请求来获取两个不同的产品类别。由于jQuery上的slice（）函数，我在多个页面上创建了我的目录，如下所示：

var $el = $("#wrap > div");
var pageSize = 9;
var page = 1;

$el.slice(0, pageSize).css({display: 'block'});
$el.slice(pageSize, $el.length).css({display: 'none'});

function addSlice(num){
  return num + pageSize;
}

function subtractSlice(num){
  return num - pageSize;
}

var slice = [0, pageSize];

这是我展示产品的方式：

echo '<div id="wrap" class="wrap">';

foreach ($beds['moreProducts']['productWindow'] as $items)
{
        echo '<div class="bed_images" id="bed">';
        echo '<img data-enlargeable class="images" src=' . $items['mainImageUrl'] . '?f=xxs' . '/>';
        echo '<h2 class="img_title">' . $items['name'] . '</h2>';
        echo '<p class="img_price">' . $items['priceNumeral'] . ' ^b ' . '</p>';
        echo '<p class="img_description">' . $items['typeName'] . '</p>';
        echo '</div>';
}

foreach ($sofas['moreProducts']['productWindow'] as $items)
{
        echo '<div class="sofa_images" id="sofa">';
        echo '<img data-enlargeable class="images" src=' . $items['mainImageUrl'] . '?f=xxs' . '/>';
        echo '<h2 class="img_title">' . $items['name'] . '</h2>';
        echo '<p class="img_price">' . $items['priceNumeral'] . ' ^b ' . '</p>';
        echo '<p class="img_description">' . $items['typeName'] . '</p>';
        echo '</div>';
}

我创建了一个选择器，其中包含两个选项来显示其中一个或另一个。我首先尝试了 .hide 方法，但它只隐藏了显示的 9 个项目，然后我尝试了 .remove 方法，它似乎有效，但它让我清空页面，直到我到达我有项目的页面（例如，我有第 2-23 页是空的）所以我有点迫切想知道我怎样才能设法只分配选定的类别？