从JQuery ListNav插件中排除特定元素

Question

我使用Jquery插件来过滤记录。以下是我获得插件的链接：

http://ericsteinborn.com/jquery-listnav/

我能够成功实现此插件。虽然它在我的代码中按字母过滤时，它也会计算它下面的标题。请查看以下图片以获得更清晰：

现在，正如你在上面的图片中看到的那样，总数是4。但是，它应该只有1，因为T只包含一个条目。它还计算我提到的标题，即3 (Title, Type, Training Required).

这是另一个例子：

我可以禁用头数使其工作但是当任何字母表不包含任何记录但是标题然后它还显示那里有记录时会出现问题。如上图所示，F字母不包含任何名称，但标题为Full Name。

因此，我想知道如何排除标题记录。以下是我在View中的代码。

查看

<ul id="demoOne" class="demo">

       <span class="site-heading">Title</span>
       <span class="site-heading">Address/Location</span>
       <span class="site-type" >Type</span>
       <span class="site-type">Training<br />Required</span>
       <hr class="horizontal-row "> 
        <?php
                $i = 0;
                foreach($sites as $site) :
         ?>
       <ul class="<?php print ($i % 2 == 1) ? 'horizontal' : 'horizontal_odd'; ?>">

            <li class="col-site-first">
                  <a href="#" style="text-decoration:none; color: #990000; font-weight:bold;"><?php print $site->title; ?></a>
             </li>
             <li class="col-site-first">
       <?php
               print $site->unit.' '.
                $site->street.' '.
                 $site->suburb.' '.
                $site->state.' '.
                 $site->postcode.'<br />'.
                  $site->location;
           ?>
                        </li>
                         <li class="col-site-type"><?php print str_replace(",", "<br />", $site->job_type_title); ?></li>
                         <li class="col-site-edit"><strong><?php print ($site->required_training == 0) ? "No" : "Yes" ;?></strong></li>
                        <li class="col-site-edit">
                            <a href="<?php print site_url('sites/edit/'.$site->sid); ?>" class="table-edit-link"></a>
                            <a href="javascript:void(0);" class="table-delete-link" sid="<?php print $site->sid; ?>" title="<?php print $site->title; ?>"></a>
                        </li>
                    </ul>

                    <?php
                    $i++;
                endforeach; ?>
            </ul></tr>

简单的JQuery脚本

  <script>
            $(function(){
                 $('#demoOne').listnav({

                    noMatchText: 'No user in the system.'
                        });

                    });
                </script>

基本上，据我所知，它包括demo div之间的所有内容。

任何帮助将不胜感激。感谢

Answer 1

方式1：

您可以定位所有子 ul ，其中水平和 horizo​​ntal_odd 类添加了父级ul，因此它只考虑内部ul并将跳过标题所在的主要ul：

$(function(){

    $('#demoOne ul:eq(0)').listnav({

    noMatchText: 'No user in the system.'

   });

});

方式2：

或修改你的html以将标题放在单独的ul

中

<ul class="demo">

       <span class="site-heading">Title</span>
       <span class="site-heading">Address/Location</span>
       <span class="site-type" >Type</span>
       <span class="site-type">Training<br />Required</span>
       <hr class="horizontal-row ">
</ul>

和单独的内容：

<ul id="demoOne" class="demo">
<?php
                $i = 0;
                foreach($sites as $site) :
         ?>
       <ul class="<?php print ($i % 2 == 1) ? 'horizontal' : 'horizontal_odd'; ?>">

            <li class="col-site-first">
                  <a href="#" style="text-decoration:none; color: #990000; font-weight:bold;"><?php print $site->title; ?></a>
             </li>
             <li class="col-site-first">
       <?php
               print $site->unit.' '.
                $site->street.' '.
                 $site->suburb.' '.
                $site->state.' '.
                 $site->postcode.'<br />'.
                  $site->location;
           ?>
                        </li>
                         <li class="col-site-type"><?php print str_replace(",", "<br />", $site->job_type_title); ?></li>
                         <li class="col-site-edit"><strong><?php print ($site->required_training == 0) ? "No" : "Yes" ;?></strong></li>
                        <li class="col-site-edit">
                            <a href="<?php print site_url('sites/edit/'.$site->sid); ?>" class="table-edit-link"></a>
                            <a href="javascript:void(0);" class="table-delete-link" sid="<?php print $site->sid; ?>" title="<?php print $site->title; ?>"></a>
                        </li>
                    </ul>

                    <?php
                    $i++;
                endforeach; ?>
            </ul>

并在jquery中：

$(function(){
    $('#demoOne').listnav({

    noMatchText: 'No user in the system.'
   });

});

UPDATE：

在研究插件后，我发现它的属性filterSelector在你的场景中很有用，它只会过滤那些元素，你可以这样使用它：

在内部子ul上添加泛型类，然后使用它：

<ul class="<?php print ($i % 2 == 1) ? 'horizontal' : 'horizontal_odd'; ?> childRow">

$（函数（）{         $（ '＃demoOne'）。listnav（{

    noMatchText: 'No user in the system.',
    filterSelector: '.childRow'
   });

});

您可以在 DEMO6 标签上的URL上看到filterSelector DEMO。

OP通过使用建议的更新解决方案修改其html来解决它：

<li class="col-site-first">
    <div class="childRow">
        <a href="#" style="text-decoration:none; color: #990000; font-weight:bold;"><?php print $site->title; ?></a>
     </div>
</li>