如何使用 jQuery 和 CSS 限制动态填充的导航？答案

【问题标题】：How do I limit a dynamically populated navigation using jQuery and CSS?如何使用 jQuery 和 CSS 限制动态填充的导航？
【发布时间】：2013-06-11 15:56:55
【问题描述】：

我正在使用一个名为 Perch 的 CMS，我需要将博客导航设置为过去 12 个月。 Perch 说我不能在 CMS 方面做到这一点。有没有办法在前端使用 jQuery 函数和 CSS 来做到这一点？

这是 CMS 在前端输出的代码。

<ul>

    <li><a href="archive.php?year=2013">2013</a>

<ul>

    <li><a href="archive.php?year=2013&amp;month=06">June</a></li>

    <li><a href="archive.php?year=2013&amp;month=05">May</a></li>

    <li><a href="archive.php?year=2013&amp;month=04">April</a></li>

    <li><a href="archive.php?year=2013&amp;month=03">March</a></li>

    <li><a href="archive.php?year=2013&amp;month=02">February</a></li>

    <li><a href="archive.php?year=2013&amp;month=01">January</a></li>

</ul>

    </li>

    <li><a href="archive.php?year=2012">2012</a>

<ul>

    <li><a href="archive.php?year=2012&amp;month=12">December</a></li>

    <li><a href="archive.php?year=2012&amp;month=11">November</a></li>

    <li><a href="archive.php?year=2012&amp;month=10">October</a></li>

    <li><a href="archive.php?year=2012&amp;month=09">September</a></li>

    <li><a href="archive.php?year=2012&amp;month=08">August</a></li>

    <li><a href="archive.php?year=2012&amp;month=07">July</a></li>

    <li><a href="archive.php?year=2012&amp;month=06">June</a></li>

    <li><a href="archive.php?year=2012&amp;month=05">May</a></li>

    <li><a href="archive.php?year=2012&amp;month=04">April</a></li>

    <li><a href="archive.php?year=2012&amp;month=03">March</a></li>

    <li><a href="archive.php?year=2012&amp;month=02">February</a></li>

    <li><a href="archive.php?year=2012&amp;month=01">January</a></li>

</ul>

    </li>

    <li><a href="archive.php?year=2011">2011</a>

<ul>

    <li><a href="archive.php?year=2011&amp;month=12">December</a></li>

    <li><a href="archive.php?year=2011&amp;month=11">November</a></li>

    <li><a href="archive.php?year=2011&amp;month=10">October</a></li>

    <li><a href="archive.php?year=2011&amp;month=09">September</a></li>

    <li><a href="archive.php?year=2011&amp;month=08">August</a></li>

    <li><a href="archive.php?year=2011&amp;month=07">July</a></li>

    <li><a href="archive.php?year=2011&amp;month=06">June</a></li>

    <li><a href="archive.php?year=2011&amp;month=05">May</a></li>

    <li><a href="archive.php?year=2011&amp;month=04">April</a></li>

    <li><a href="archive.php?year=2011&amp;month=03">March</a></li>

    <li><a href="archive.php?year=2011&amp;month=02">February</a></li>

    <li><a href="archive.php?year=2011&amp;month=01">January</a></li>

</ul>

    </li>

    <li><a href="archive.php?year=2010">2010</a>

<ul>

    <li><a href="archive.php?year=2010&amp;month=11">November</a></li>

    <li><a href="archive.php?year=2010&amp;month=09">September</a></li>

    <li><a href="archive.php?year=2010&amp;month=02">February</a></li>

</ul>

请提供任何帮助！

【问题讨论】：

目前有代码吗？

标签： jquery css navigation limit blogs

【解决方案1】：

嗯，用 JS 删除数据从来都不是一个好主意，因为你可以很容易地防止这种情况发生，所以你应该找到一种方法来限制 php/perch 的输出。

在 jQuery 中，你可以这样做：

$('li:gt(11)').remove();

$('ul').each(function() {
    if (!$(this).children().length) $(this).remove();
});

【讨论】：