javascript - Обнаружение содержимого тега статьи для автоматического назначения класса статьи

Question

Итак, я использую blogger.com как свою платформу для ведения блога прямо сейчас. Как известно, блоггер - очень простая платформа без поддержки продвинутого языка программирования. Это можно сделать только с помощью 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 трюком. Например, если мой формат сообщения является аудио (<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'); 
});