Question

是否可以引用<li>索引？我想这样做是为了能够添加/删除/重新排序<li>标签，而无需手动更改参考号。

以下是一些使用HTML制作的示例，其中概述了我认为这样做的方式：

<ol>
     <li>...</li>
     <li ref="some-ref">Some text that I want to refer to later ...</li>
     <li>...</li>
     <li>According to <liref ref="some-ref" />, ...</li>
</ol>

所需的输出当然是：

...
我想稍后提及的一些文字......
...
根据2.，...

在现实生活中的HTML中是否有这样的东西？

Answer 1

HTML不提供此类机制。您需要服务器端或客户端脚本来实现此目的。

您还可以尝试使用CSS counter属性： https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Counters

Answer 2

对于它的价值，我已经使用jQuery完成了我想要的东西。它没有直接回答这个问题，但对某人有用。它也适用于嵌套列表。

举个例子：

<ol>
    <li>...</li>
    <li>Nested list
        <ol>
            <li>...</li>
            <li id="ref1">Some text that I want to refer to later ...</li>
            <li>...</li>
            <li id="ref2">Different text that I want to refer to ...</li>
            <li>According to <span class="ref" name="#ref2"></span>, ...</li>
        </ol>
    </li>
    <li>According to <span class="ref" name="#ref1"></span>, ...</li>
</ol>

使用这个jQuery代码：

$(function() {
    $('.ref').each(function() {
        var refLi = $($(this).attr('name'));
        var refLiAncestorLis = refLi.parents('li');
        var reference = '';
        for (var i = refLiAncestorLis.length - 1; i >= 0; i--) {
            reference += $(refLiAncestorLis[i]).index() + 1 + '.';
        }
        reference += refLi.index() + 1 + '.';
        $(this).text(reference);
    });
});

您可以获得此输出：

...
嵌套列表
1. ...
2. 我想稍后提及的一些文字......
3. ...
4. 我想提及的另一个文字......
5. 根据2.4。，...
根据2.2。，...

Answer 3

尝试使用

id="something"

然后相应地修改它，但请注意CSS id必须是唯一的。

是否可以引用<li>索引？</li>

3 个答案: