filtrify

Block "data" attributes

<div id="placeHolder"></div>

<!-- In order to reduce HTML markup and file size, content text is being added using :before and :after pseudo-elements in the CSS -->

<ul id="container">
    <li data-title="25th Hour" data-genre="Crime, Drama" data-main-actors="Edward Norton, Barry Pepper, Philip Seymour Hoffman, Rosario Dawson" data-director="Spike Lee" data-rating="7.8" data-imdb-rating-range="7 - 8"> ... </li>
    <li data-title="28 Days Later..." data-genre="Horror, Sci-Fi, Thriller" data-main-actors="Cillian Murphy, Naomie Harris, Christopher Eccleston, Alex Palmer" data-director="Danny Boyle" data-rating="7.6" data-imdb-rating-range="7 - 8"> ... </li>
    <li data-title="300" data-genre="Action, Fantasy, History, War" data-main-actors="Gerard Butler, Lena Headey, David Wenham, Dominic West" data-director="Zack Snyder" data-rating="7.8" data-imdb-rating-range="7 - 8"> ... </li>
    ...
</ul>

$(function() {

    /* Blocking "data-title" and "data-rating" from being added as categories */
    $.filtrify("container", "placeHolder", {
        block : ["data-title", "data-rating"]
    });

});

ul#container > li:before {
    content: attr(data-title);
}

ul#container > li:after {
    content: attr(data-genre) "\A\A" attr(data-main-actors) "\A\A imdb: " attr(data-rating);
    white-space: pre-wrap;
}

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
•