javascript - 如何捕获 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 属性。

普通 JavaScript 实现:

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

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

jQuery 实现:

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

<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>