使用jquery筛选同时列表时出现的问题

我在使用jQuery筛选公文包布局中的某些内容时遇到了一些问题。目前我正在使用WordPress。这是我打开后的页面：

<div id="portfolio" class="index works">
    <ul id="portfolio-filter" class="horiz-list">
        <li><a ref="all" title="" href="#all" class="current">All</a></li>
        <li><a ref="editorial" title="" href="#editorial" class="">Editorial</a></li>
        <li><a ref="embalagem" title="" href="#embalagem">Embalagem</a></li>
        <li><a ref="identidade-visual-coportativa" title="" href="#identidade-visual-coportativa">Identidade Visual Coportativa</a></li>
        <li><a ref="marketing" title="" href="#marketing">Marketing</a></li>
        <li><a ref="merchandising-e-pdv" title="" href="#merchandising-e-pdv">Merchandising e PDV</a></li>
        <li><a ref="sinalizacao" title="" href="#sinalizacao">Sinalização</a></li>
   </ul>     
   <div id="your_post_here_1" style="float: left;"></div>
   <ul id="portfolio-list" class="horiz-list" linha="1">
        <li class="  even portfolio-entry marketing " style="margin-right: 20px; display: list-item; ">
            <div class="entry-thumb standard" id="portfolio_thumb">
                <a class="thumblink" href="javascript:void(0)" linha="1" postid="817" link="#" rel="prettyPhoto[1266_active]">
                    <img class="thumbnail" src="">
                    <span class="extra" style="display: none; "></span>
                </a>
            </div>
            <div class="entry-title" id="link" style="visibility: visible; top: -124px; ">
               <a href="javascript:void(0)" title="Projeto Verão" rel="bookmark">
                   Projeto Verão
               </a>
            </div>
            <a class="more-link" href="javascript:void(0)" linha="1" postid="817" style="bottom: -40px; "></a>
        </li>
        <li class="  odd portfolio-entry marketing " style="margin-right: 20px; display: list-item; ">
            <div class="entry-thumb standard" id="portfolio_thumb">
                <a class="thumblink" href="javascript:void(0)" linha="1" postid="851" link="#" rel="prettyPhoto[1266_active]">
                   <img class="thumbnail" src="#">
                   <span class="extra"></span>
                </a>
           </div>
           <div class="entry-title" id="link">
               <a href="javascript:void(0)" title="Fixate" rel="bookmark">
                   Fixate
               </a>
           </div>
           <a class="more-link" href="javascript:void(0)" linha="1" postid="851"></a>
        </li>
   </ul>
   <div id="your_post_here_2" style="float: left;"></div>

   <ul id="portfolio-list" class="horiz-list" linha="2">
        <li class="  even portfolio-entry marketing " style="margin-right: 20px; display: list-item; ">
            <div class="entry-thumb standard" id="portfolio_thumb">
                <a class="thumblink" href="javascript:void(0)" linha="2" postid="817" link="#" rel="prettyPhoto[1266_active]">
                    <img class="thumbnail" src="">
                    <span class="extra" style="display: none; "></span>
                </a>
            </div>
            <div class="entry-title" id="link" style="visibility: visible; top: -124px; ">
               <a href="javascript:void(0)" title="Projeto Verão" rel="bookmark">
                   Projeto Verão
               </a>
            </div>
            <a class="more-link" href="javascript:void(0)" linha="2" postid="817" style="bottom: -40px; "></a>
        </li>
        <li class="  odd portfolio-entry marketing " style="margin-right: 20px; display: list-item; ">
            <div class="entry-thumb standard" id="portfolio_thumb">
                <a class="thumblink" href="javascript:void(0)" linha="2" postid="851" link="#" rel="prettyPhoto[1266_active]">
                   <img class="thumbnail" src="#">
                   <span class="extra"></span>
                </a>
           </div>
           <div class="entry-title" id="link">
               <a href="javascript:void(0)" title="Fixate" rel="bookmark">
                   Fixate
               </a>
           </div>
           <a class="more-link" href="javascript:void(0)" linha="2" postid="851"></a>
        </li>
   </ul>
   <div id="your_post_here_3" style="float: left;"></div>
</div>

所以，我的问题是，当我激活过滤器时，它只发生在第一行，我可能在设置页面时犯了一个错误，但奇怪的是，它正在工作！我试着把它改回去，但还是没有发生。。。如果有人有什么建议，我将不胜感激

我想要的是，将上面的所有内容简化为一个带有一些列表的div，然后进行过滤。 大概是这样的：

<div>
  <ul id="portfolio">
    <li class="booking"></li>
    <li class="code"></li>
    <li class="hash"></li>
  </ul>
  <ul id="portfolio">
    <li class="booking"></li>
    <li class="marketing"></li>
    <li class="booking"></li>
  </ul>
</div>

激活时，隐藏不在所选类别中的人 选择预订，例如：

<div>
  <ul id="portfolio">
    <li class="booking"></li>
  </ul>
<ul id="portfolio">
  <li class="booking"></li>
  <li class="booking"></li>
  </ul>
</div>

---

不完全是删除，但在其上显示none。

Id必须是唯一的。将

id=“portfolio list”

更改为

class=“portfolio list”

，然后使用

$（“.portfolio list”）.filterable（）
Id必须是唯一的。将
id=“portfolio list”
更改为
class=“portfolio list”
，然后使用
$（“.portfolio list”）.filterable（）
请澄清问题；很难说期望的目标和问题是什么。对不起，我对这篇文章进行了编辑，我希望这有助于澄清问题；很难说出你想要的目标和问题是什么。对不起，我在帖子上做了一个编辑，我希望它对你有帮助。你是对的，我把id标签弄乱了。我将尝试更改，看看它是否有效！你说得对，我把id标签弄乱了，我要试着换一下，看看是否有效！
<div>
  <ul id="portfolio">
    <li class="booking"></li>
  </ul>
<ul id="portfolio">
  <li class="booking"></li>
  <li class="booking"></li>
  </ul>
</div>