replacing "tag-tagname" with "tag name"
A Pen by David Cochran on CodePen.
replacing "tag-tagname" with "tag name"
A Pen by David Cochran on CodePen.
<header role="banner"> | |
<h1>Tags List with jQuery</h1> | |
</header> | |
<div id="posts"> | |
<article class="post tag-a tag-b tag-c"> | |
<h2>Article</h2> | |
<p>CLASSES: post tag-a tag-b tag-c</p> | |
</article> | |
<article class="post tag-x tag-y tag-z"> | |
<h2>Article</h2> | |
<p>CLASSES: post tag-x tag-y tag-z</p> | |
</article> | |
<article class="post tag-a tag-z tag-b"> | |
<h2>Article</h2> | |
<p>CLASSES: post tag-a tag-z tag-b</p> | |
</article> | |
<article class="post tag-z tag-b tag-c"> | |
<h2>Article</h2> | |
<p>CLASSES: post tag-z tag-b tag-c</p> | |
</article> | |
</div> |
var tagNames = {}; | |
$('.post').each(function() { | |
$($(this).attr('class').split(' ')).each(function() { | |
if (this !== '') { | |
if (this.indexOf("tag-") >= 0) { | |
tagName = this; | |
tagNames[this] = tagName; | |
} | |
} | |
}); | |
}); | |
var tagsList = ''; | |
for (tagName in tagNames) { | |
tagsList += '<li>'+tagName.replace('tag-','');+'</li>'; | |
}; | |
$('header[role="banner"]').append('<div id="tag-name-list"><ul>'+tagsList+'</ul></div>'); |
#tag-name-list { | |
background-color: yellow; | |
&:before { | |
content: 'List of Unique Tag Names (with "tag-" stripped out):'; | |
// float: left; | |
} | |
} | |
body { padding: 10px;} | |
#tag-name-list { | |
padding: 8px 0 8px 8px; | |
overflow: hidden; | |
ul { | |
// float: left; | |
list-style-type: none; | |
font-size: 0.8em; | |
color: #575757; | |
// margin: 0; | |
// padding: 0; | |
> li { | |
margin-left: 8px; | |
// float: left; | |
} | |
} | |
} | |
h2 { | |
clear: both; | |
margin: 16px 0 0 0; | |
} | |
p { | |
margin: 0; | |
} |