如何捕获html属性的值，然后在html中将其作为文本写入？

Question

我正在尝试在网页上显示类值。我希望能够创建包含许多样式组合的页面。然后为了准确起见，页面会自动显示这些变量。而不是像这样手动复制和粘贴字符串：

<figure class="left my-figure my-figure-50 thumbnail">
    <img src="https://unsplash.it/400/200/" />
    <figcaption>left my-figure my-figure-50 thumbnail</figcaption>
</figure>

我想在标题区<figure>中转储父<figcaption>的类并获取

我猜测.getAttribute("class")或.attr('class')可以在某处使用，但对于我的生活，我似乎无法弄明白。

Answer 1

您可以在此处使用HTML元素的textContent和className属性。

Vanilla JavaScript实施：

＆＃13;

＆＃13;

document.querySelectorAll('figure').forEach(function (figure) {
  figure.querySelector('figcaption').textContent = figure.className
})

＆＃13;

<figure class="left my-figure my-figure-50 thumbnail">
    <img src="https://unsplash.it/400/200/" />
    <figcaption></figcaption>
</figure>

＆＃13;

＆＃13;

＆＃13;

jQuery实现：

＆＃13;

＆＃13;

$('figure').each(function () {
  $('figcaption', this).text(this.className)
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<figure class="left my-figure my-figure-50 thumbnail">
    <img src="https://unsplash.it/400/200/" />
    <figcaption></figcaption>
</figure>

＆＃13;

＆＃13;

＆＃13;