0

如果页面上没有与之匹配的属性，则试图找到一种隐藏列表项的方法。

我有一个<li><a href="http://www.somewhere.com" data-filter="name">link</a></li>页面的一部分，我有<div id="thisitem" rel="name">stuff here</div>另一个。

如果 data-filter 和 rel 不匹配，我想用 jQuery 隐藏“<'li'>”。

在这一点上，我正在使用警报来查看至少其中一些是否有效。部分是，但问题是它隐藏了所有“<'li'>”。我希望它只隐藏不匹配的那个。

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

您的帮助将不胜感激。干杯，迈克

更新：这是一个小提琴。http://jsfiddle.net/9BsnV/1/。

4

4 回答 4

0 
$("#filter a")
  .not("[data-filter=" + $('#portfolio-overview article').attr('rel').replace(/^\./,'').replace(/\s$/,'') + "]")
  .parents("li")
  .hide();
于 2013-05-01T16:16:58.497 回答
0

看看你发布的代码，我建议，也许：

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

参考：

于 2013-05-01T16:34:01.920 回答
0 
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
            $(this).hide();
        }
    });
});

编辑：仅供参考以上的简短版本：

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

EDIT2：相反的效果：

jQuery("#portfolio").find(".item").each(function () {
    var rel = $.trim($(this).attr('rel'));
    jQuery("#filter a").filter(function () {
        return ($(this).data("filter") == rel);
    }).parent().hide();
});
于 2013-05-01T19:25:16.673 回答
0

@Malk 帮助解决了大部分问题。我有一些问题仍然存在，但我能够弄清楚。保持第一个 li 处于活动状态和第二个问题是处理具有多个未显示的值的 rel 的两个问题。我拿了@Malk 的代码

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$/,'')
}

并以这种方式修改它。

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];
}

现在，只要有带有数据过滤器的活动列表项与页面上的任何其他 rel 项不匹配，它将不会显示。这是更新的小提琴http://jsfiddle.net/9BsnV/10/。注意带有数据过滤器的 li 命名 UI .UI ..它没有显示。

这有助于我处理同位素过滤和分页。

干杯，迈克

于 2013-05-02T00:52:04.710 回答