Javascript 显示具有特定类别的产品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>';
}

echo'；
foreach（$beds['moreProducts']['productWindow']作为$items）
{
回声'；
回声'；
回显'.$items['name'].'；
echo'
。$items['pricenumeric'].^b'
；
echo'
。$items['typeName']。
；
回声'；
}
foreach（$sofas['moreProducts']['productWindow']作为$items）
{
回声'；
回声'；
回显'.$items['name'].'；
echo'
。$items['pricenumeric'].^b'
；
echo'
。$items['typeName']。
；
回声'；
}

我创建了一个带有两个选项的选择选择器，以显示其中一个或另一个。我首先尝试了.hide方法，但它只隐藏了显示的9个项目，然后我尝试了.remove方法，该方法看起来很有效，但它允许我清空页面，直到我到达包含项目的页面（例如，我有空的第2-23页）所以我有点急切地想知道我如何才能做到只显示选定的类别