Question

我有以下有序列表：

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

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

Answer 1

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

尝试

.show()

和css

$('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');

<强> Fiddle

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>

DEMO.

<强>更新

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

DEMO.

更新：（制作一个功能）

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

hideLiByIndex(1);

DEMO.

Answer 3

尝试使用

隐藏div

visibility: hidden;

并将其更改为

visibility: visible;

当你想要它显示

时

<强>的jQuery

显示：

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

隐藏：

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

OL李编号问题

3 个答案: