javascript -检测文章标记内容以自动分配项目类

Question

所以，我现在正在使用blogger.com作为我的博客平台。正如我们所知，blogger是一个非常简单的平台，没有任何高级编程语言支持。只有使用Javascript才有可能玩任何把戏。

我的文章是关于个人博客的一些帖子格式，如Wordpress使用，我有一个标准的帖子，音频帖子，视频帖子。我想显示基于我的文章格式类型的文章格式图标，在我的帖子标题旁边。视频帖子将有视频图标旁边的标题，音频帖子将有音频图标旁边的标题，等等。

这是我的帖子标记：

<div class="post">
    <h3>
        <a href="#">Post title</a>
    </h3>
    <!--content goes here-->
</div>

为了使Javascript能够识别我的帖子格式，我将在我的帖子中添加一个标签，比如：<span data-format="audio-format"></span>或<span data-format="video-format"></span>等等。

<div class="post">
    <h3>
        <a href="#">Post title</a>
    </h3>
    <span data-format="video-format"></span>
    <!--content goes here-->
</div>

然后javascript将向我的帖子标记中添加一个类，这样我就可以根据CSS类技巧设置图标。例如，如果我的post格式是音频(<span data-format="audio-format"></span>)，Javascript将在我的帖子标记中添加audio-format "CSS类“。

<div class="post audio-format">
    <h3>
        <a href="#">Post title</a>
    </h3>
    <span data-format="audio-format"></span>
    <!--content goes here-->
</div>

不幸的是，我的技能只是HTML和CSS，我不太懂Javascript或jQuery。有可能用Javascript的把戏吗？

PS:对不起我的英语。

Answer 1

如果我正确理解了这个问题：

$('div.post').has('span[data-format]').addClass(function() {
   var format = $('span[data-format]', this).data('format');
   return 'post-format-' + format.split('-')[0];
});

另一种选择：

[].slice.call(document.querySelectorAll('.post')).forEach(function(post) {
     var span = post.querySelector('span[data-format]');
     if (!span) return;
     var format = span.getAttribute('data-format').split('-')[0];
     post.classList.add('post-format-' + format);
});

编辑:根据修改后的标记，您应该只删除拆分的部分。

$('div.post').addClass(function() {
   return $('span[data-format]', this).data('format');
});