Question

因此，如标题中所述，我的页面中有一个内容表，该表随数字一起动态创建。请注意，我没有使用CSS编号。目录表/列表是使用ol和li动态创建的常规方法。但是基于特定的数据属性，我想在列表中隐藏或显示这些数字。无论如何，有没有将它们定位为不显示？想在其中定位int吗？

function drawOlForItems(itemsToDraw, parentIndex) {
        var $ol = $("<ol>");

        itemsToDraw.foreach(function (item, index) {
            var entryIndex = index + 1;
            var $li = $("<li class='toc-level-{0}'>".format(item.level));
            var itemIndex = parentIndex != null ? "{0}.{1}".format(parentIndex, entryIndex) : entryIndex;
            $li.append("<span class='entry-text'>{0}) {1}</span>".format(itemIndex, item.heading));
            //$li.append("{0}".format(item.heading));

            if (item.subItems.length) {
                var subItems = drawOlForItems(item.subItems, itemIndex);
                $li.append(subItems);
            }
            $ol.append($li);
        });

        return $ol;
    }

编辑：是否可以选择特定的Unicode字符？例如，是否有一种方法可以具体选择数字1？

这是将列表注入其中的html div：

<div id="inject-toc-here" style="font-family:'Century Gothic'" data-show-numbers="" data-cssNumbering="">

</div>

编辑2：为澄清起见，我想隐藏编号，而不是列表中的元素，仅隐藏它们旁边的数字。我没有使用CSS编号。

Answer 1

您还可以使用CSS中的属性选择器根据数据更改样式：

div[data-show-numbers="no"] li {
  list-style: none;
}

div[data-show-numbers="no"] li {
  list-style: none;
}

data-show-numbers="no"
<div id="inject-toc-here" style="font-family:'Century Gothic'" data-show-numbers="no" data-cssNumbering="">
  <ol>
    <li>Listing numbered</li>
    <li>Listing numbered</li>
    <li>Listing numbered</li>
    <li>Listing numbered</li>
    <li>Listing numbered</li>
    <li>Listing numbered</li>
    <li>Listing numbered</li>
    <li>Listing numbered</li>
  </ol>
</div>

data-show-numbers="yes"

<div id="inject-toc-here" style="font-family:'Century Gothic'" data-show-numbers="yes" data-cssNumbering="">
  <ol>
    <li>Listing numbered</li>
    <li>Listing numbered</li>
    <li>Listing numbered</li>
    <li>Listing numbered</li>
    <li>Listing numbered</li>
    <li>Listing numbered</li>
    <li>Listing numbered</li>
    <li>Listing numbered</li>
  </ol>
</div>

如果您希望将样式应用于匹配元素，也可以查看:nth-child伪类：https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

无论如何，在css中文本中是否专门针对数字？

1 个答案: