Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save data-enhanced/9927206 to your computer and use it in GitHub Desktop.
Save data-enhanced/9927206 to your computer and use it in GitHub Desktop.
A Pen by David Cochran.
<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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment