是否有一种方法可以选择动态创建的CSS以显示在其他地方？

Question

我有一个动态创建的目录表，它使用css进行编号。如下图所示，插入编号时使用的是：：a标记之前的图片。

<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‘在’集成‘。