javascript - OL li 编号问题

Question

我有以下有序列表：

<ol>     
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
</ol>

我必须使用“显示”属性一次显示一个 li。问题是，无论显示哪个 li，列表编号都显示 1。因此，我看到的不是“2. Second”或“3. Third”，而是“1. Second”、“1. Third”等.

Answer 1

查看问题（不清楚）和您的小提琴，您似乎希望隐藏的 div 保留其列表顺序号并且可见以显示它们各自的列表编号，而不是从 1 开始。这对于 jquery 是不可能的.hide()，.show()因为它们使用显示更改列表序号的属性。您需要使用可见性。

尝试

$('li').not(':eq(2)')
          .css('height', '0px') //Use this only if you dont want to show the lists that are hidden because visibility takes space in the page flow.
          .end().filter(':eq(2)')
          .css('visibility', 'visible');

和一个CSS

ol li {
    visibility : hidden; /*Or just use jquery to set the css to visibility hidden*/
}

小提琴

Answer 2

我从您的问题中了解到I've to display one li at a time，您可以使用start属性从某个索引开始。

<ol>
    <li>First</li> <!-- 1 -->
    <li>Second</li> <!-- 2 -->
    <li>Third</li> <!-- 3 -->
</ol>

<ol>
    <li>First</li> <!-- 1 (default)-->
</ol>

<ol start="2">
    <li>Second</li> <!-- 2 -->
</ol>

<ol start="3">
    <li>Third</li> <!-- 3 -->
</ol>

<ol start="50">
    <li>Fifty</li>
    <li>Fifty One</li>
</ol>

演示。

更新：

$('li').hide();
var index = 2, li = $('li').eq(index);
li.closest('ol').attr('start', index+1).find(li).show();

演示。

更新：（做一个功能）

function hideLiByIndex(i)
{
    $('li').hide();
    li = $('li').eq(i);
    li.closest('ol').attr('start', i+1).find(li).show();
}

hideLiByIndex(1);

演示。

Answer 3

尝试使用隐藏 div

visibility: hidden;

并将其更改为

visibility: visible;

当你想要它显示时

jQuery

显示：

$(element).css("visibility","visible");

隐藏：

$(element).css("visibility","hidden");