Hide li if no matching attributes on page with jQuery

Trying to find a way to hide a list item if there are no attributes on the page to match it.

I have a <li><a href="http://www.somewhere.com" data-filter="name">link</a></li> on one part of the page and i have <div id="thisitem" rel="name">stuff here</div> on another.

If data-filter and rel don't match I want to hide the "<'li'>" with jQuery.

At this point i'm using alert to see if at least some of it is working. Part of it is, but the problem is that it hides all "<'li'>"'s. I would like it to hide only the one that doesn't match.

var $filter = jQuery('#filter a').attr('data-filter');
var $item = jQuery('#portfolio-overview article').attr('rel');
    if( $filter != $item)

Your help would be greatly appreciated. Cheers, Mike

UPDATE: Here's a fiddle for this. http://jsfiddle.net/9BsnV/1/.


Looking at the code you posted, I'd suggest, perhaps:

$('li a').filter(function(){
    return !$('div[data-rel="' + $(this).data('name') + '"]').length;


$("#filter a")
  .not("[data-filter=" + $('#portfolio-overview article').attr('rel').replace(/^\./,'').replace(/\s$/,'') + "]")

jQuery('#filter a').each(function () {//process the links
    var $filter = jQuery(this).data('filter');
    jQuery("#portfolio").find(".item").each(function () {/process the list
        if ($.trim($(this).attr("rel")) == $filter) {// trim that trailing space and compare

EDIT: FYI short version of above:

jQuery('#filter a').each(function () {//process the links
    jQuery("#portfolio").find(".item[rel*='"+ jQuery(this).data('filter')+"']").hide();

EDIT2: Opposite effect:

jQuery("#portfolio").find(".item").each(function () {
    var rel = $.trim($(this).attr('rel'));
    jQuery("#filter a").filter(function () {
        return ($(this).data("filter") == rel);

@Malk helped with the majority of this. I had some issues that remained though of which I was able to figure out. The two issues where keeping the first li active and the second was dealing with rel's that had multiple values which were not displaying. I took @Malk's code

var rels = [];
$("#portfolio article").each(function(){rels.push(cleanVal($(this).attr("rel")))});
$("#filter a").filter(function(){return ($.inArray(cleanVal($(this).data("filter")), rels) == -1);}).parent().hide();

function cleanVal(v){
return v.replace(/^\./,'').replace(/\s$/,'')

and modified it this way.

var rels = [];
jQuery("#portfolio article").each(function({rels.push(cleanVal(jQuery(this).attr("rel")))});
jQuery("#filter a:not(:first)").filter(function(){return (jQuery.inArray(cleanVal(jQuery(this).data("filter")), rels) == -1);}).parent().hide();

function cleanVal(v){
return v.replace(/^\./,'').replace(/\s$/,'').split("")[0];

Now whenever there is active list item with a data-filter that doesn't match any other rel items on the page it will not be displayed. Here's the updated fiddle http://jsfiddle.net/9BsnV/10/. Notice the li named UI with data-filter .UI..it is not showing.

This is helping me out with isotope filtering and pagination getting along.

Cheers, Mike

Need Your Help

main div with 2 divs, 1 in middle and one right of it

html css

I want it like in this picture, div header has 2 divs inside of it, div logo should be in middle, and div info should be right of it with some margin.