Question

我有一个动态创建的目录，该目录使用CSS编号。如下图所示，在a标签之前使用:: before插入了编号。

<div class="toc-list-item toc-level-1 show-css-numbering" style="font-weight: bold;">
<a class="entry-text contents" id="TOCEntry_1_ID" href="#TOCEntry1ID">Integrated Wealth Planning</a>
</div>

我想知道是否可以选择此特定编号并将其添加到目录中的相应标题之前。

我尝试过：

$heading.prepend("<span class='heading-number'>{0})&nbsp;</span>".format($(".entry-text::before")));

但是它看起来似乎还行不通，只以{0})结尾。有人对我如何选择号码有任何想法吗？预先感谢。

编辑：我的CSS：

#inject-toc-here {
            counter-reset: heading;
        }

        .show-css-numbering.toc-level-1:before {
            content: counter(heading)") ";
            counter-increment: heading;
        }

        .show-css-numbering.toc-level-1 {
            counter-reset: subheadingLVL2;
        }

        .show-css-numbering.toc-level-2:before {
            content: counter(heading)"." counter(subheadingLVL2)") ";
            counter-increment: subheadingLVL2;
        }

        .show-css-numbering.toc-level-2 {
            counter-reset: subheadingLVL3;
        }

        .show-css-numbering.toc-level-3:before {
            content: counter(heading)"." counter(subheadingLVL2)"." counter(subheadingLVL3)") ";
            counter-increment: subheadingLVL3;
        }

        .show-css-numbering.toc-level-3 {
            counter-reset: subheadingLVL4;
        }

        .show-css-numbering.toc-level-4:before {
            content: counter(heading)"." counter(subheadingLVL2)"." counter(subheadingLVL3)"." counter(subheadingLVL4)") ";
            counter-increment: subheadingLVL4;
        }

        .show-css-numbering.toc-level-4 {
            counter-reset: subheadingLVL5;
        }

        .show-css-numbering.toc-level-5:before {
            content: counter(heading)"." counter(subheadingLVL2)"." counter(subheadingLVL3)"." counter(subheadingLVL4)"." counter(subheadingLVL5)") ";
            counter-increment: subheadingLVL5;
        }

        .show-css-numbering.toc-level-5 {
            counter-reset: subheadingLVL6;
        }

        .show-css-numbering.toc-level-6:before {
            content: counter(heading)"." counter(subheadingLVL2)"." counter(subheadingLVL3)"." counter(subheadingLVL4)"." counter(subheadingLVL5)"." counter(subheadingLVL6)") ";
            counter-increment: subheadingLVL6;
        }

由于可能存在许多子标题，因此看起来很多。

Answer 1

无法从jQuery选择器访问伪元素。为此，您需要使用普通的JS，使用getComputedStyle()。像这样：

var $heading = $('#heading');

var beforeContent = window.getComputedStyle($('.toc-list-item')[0], ':before').getPropertyValue('content').replace(/"/g, '');
$heading.prepend(`<span class="heading-number">${beforeContent}&nbsp;</span>`);

.toc-list-item {
  font-weight: bold;
}
.toc-list-item::before {
  content: '123';
  position: absolute;
  top: 10px;
  left: 210px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="toc-list-item toc-level-1 show-css-numbering">
  <a class="entry-text contents" id="TOCEntry_1_ID" href="#TOCEntry1ID">Integrated Wealth Planning</a>
</div>

<div id="heading">&lt; content value</div>

还请注意，您有错字，“集成”中没有“ r”。

有没有办法选择动态创建的CSS以显示在其他地方？

1 个答案: