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

Question

我使用了Jquery插件来过滤记录。以下是我获取该插件的链接:

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

我能够成功地实现这个插件。尽管当它按我的代码中的字母进行过滤时，它也会计算其下面的标题。请看下图，看得更清楚:

现在，正如您在上图中看到的，总数是四。但是，它应该仅为 1，因为 T 仅包含一个条目。它还计算了我提到的标题，即 3 个(标题、类型、需要培训)。

这是另一个例子:

我可以禁用头数以使其工作，但是当任何字母表不包含任何记录但标题包含任何记录时，就会出现问题，然后它也显示那里有记录。如上图所示，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

方式一:

您可以针对父ul中添加了horizo​​ntal和horizo​​ntal_odd类的所有子ul，这样它只考虑内部ul 并将跳过放置标题的主 ul:

$(function(){

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

    noMatchText: 'No user in the system.'

   });

});

方式2:

或修改您的 html 以将 header 放入单独的 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 中的内容:

<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.'
   });

});

更新:

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

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

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

$(函数(){ $('#demoOne').listnav({

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

});

你可以在这个 URL 上看到 filterSelector DEMO在DEMO6选项卡上。

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>