Question

如果页面上没有与之匹配的属性，请尝试查找隐藏列表项的方法。

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

如果data-filter和rel不匹配，我想要隐藏“＆lt;'li'＆gt;”用jQuery。

此时我正在使用警报来查看其中至少有一些是否有效。部分原因是，但问题在于它隐藏了所有“＆lt;'li'＆gt;”。我希望它只隐藏一个不匹配的那个。

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/

Answer 1

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

Answer 2

查看您发布的代码，我建议，或许：

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

参考文献：

Answer 3

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();
        }
    });
});

编辑：上述FYI简短版本：

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();
});

Answer 4

@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/。请注意名为UI的带有数据过滤器的UI .UI..it未显示。

这有助于我同步过滤和分页相处。

干杯，麦克

如果页面上没有与jQuery匹配的属性，请隐藏li

4 个答案: