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.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.