javascript - 記事タグのコンテンツを検出して自動的に記事クラスを割り当てる - javascript、jquery

だから、私はブロガーを使っています。私のブログのプラットフォームとして、今すぐcom。われわれが知っているように、ブロガーは高度なプログラミング言語がサポートされていない非常にシンプルなプラットフォームです。 Javascriptで任意のトリックを行うことは可能です。

私のポストは、いくつかのポストを持つ個人的なブログについてです私は標準の投稿、オーディオ投稿、ビデオ投稿を持っています。私は私の投稿のタイトルの横に私の投稿の形式の種類に基づいて投稿の形式のアイコンを表示したい。ビデオポストにはタイトルの横にビデオアイコンがあり、オーディオポストにはタイトルの横にオーディオアイコンが表示されます。

これは私のポストマークアップです：

<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クラスのトリックに基づいてアイコンを設定することができます。たとえば、投稿形式が音声の場合（<span data-format="audio-format"></span>）、Javascriptが追加されます audio-format 私のポストマークアップに "CSS class"

<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：私の英語は申し訳ありません。

回答：

私が質問を正しく理解していれば：

$("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");
});