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

Question

我有一个动态创建的目录，使用 css 进行编号。编号是使用::before 插入的，如下图所示，位于 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，即 getCompulatedStyle()。像这样的事情:

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>

另请注意，您有一个拼写错误，“Integrated”中没有“r”。