负载元素过滤

Question

我正在使用数据过滤器过滤我网站上的数据。

一切正常，但我想展示具有特定属性的装载项目。

例如，我想在加载时只显示绿色对象。不是默认显示全部。

http://jsfiddle.net/joshvogt/UybPY/

HTML：

<section>
  <a href="#" data-filter="all" tabindex="-1">ALL</a> 
  <a href="#" data-filter="red" tabindex="-1">RED</a>
  <a href="#" data-filter="green" tabindex="-1">GREEN</a>
  <a href="#" data-filter="blue" tabindex="-1">BLUE</a>

<div data-filter="red"></div>
<div data-filter="blue"></div>
<div data-filter="red"></div>
<div data-filter="blue"></div>
<div data-filter="green"></div>
<div data-filter="red"></div>
<div data-filter="red"></div>
<div data-filter="red"></div>
<div data-filter="blue"></div>
<div data-filter="green"></div>
<div data-filter="blue"></div>
<div data-filter="green"></div>
<div data-filter="green"></div>
</section>  

CSS：

section{
  display:block;
  float:left;
  border:2px solid green;
  min-height:300px;
  width:100%;
  border-radius:4px;
}

a{
  display:block;
  float:left;
  width:25%;
  text-decoration:none;
  text-align:center;
  padding:5px 0;
  color:white;
  background:#1271C7;
}

div{
 display:block;
 float:left;
 height:40px;
 width:40px;

如何在加载时仅显示绿色元素：

div[data-filter="green"]{
  background:green;
}

Answer 1

如果我理解正确，那么你需要这个

section {
  display: block;
  float: left;
  border: 2px solid green;
  min-height: 300px;
  width: 100%;
  border-radius: 4px;
}
a {
  display: block;
  float: left;
  width: 25%;
  text-decoration: none;
  text-align: center;
  padding: 5px 0;
  color: white;
  background: #1271C7;
}
div,
a[data-filter="all"]:focus ~  div,
a[data-filter="red"]:focus ~ div[data-filter="red"],
a[data-filter="blue"]:focus ~ div[data-filter="blue"] {
  display: block;
  float: left;
  height: 40px;
  width: 40px;
  border: 1px solid black;
  margin: 10px;
  -webkit-transition: all .8s linear;
  -moz-transition: all .8s linear;
  -o-transition: all .8s linear;
  -ms-transition: all .8s linear;
  transition: all .8s linear;
  margin-top: 20px;
}
div[data-filter="red"] {
  background: red;
}
div[data-filter="green"] {
  background: green;
}
div[data-filter="blue"] {
  background: blue;
}
a:focus[data-filter] {
  opacity: .8;
  outline: none;
}

div:not([data-filter="green"]),
a[data-filter="red"]:focus ~ div:not([data-filter="red"]),
a[data-filter="green"]:focus ~ div:not([data-filter="green"]),
a[data-filter="blue"]:focus ~ div:not([data-filter="blue"]) {
  height: 0px;
  width: 0px;
  border: none;
  margin: 0;
}

<section> <a href="#" data-filter="all" tabindex="-1">ALL</a>  <a href="#" data-filter="red" tabindex="-1">RED</a>
  <a href="#" data-filter="green" tabindex="-1">GREEN</a>
  <a href="#" data-filter="blue" tabindex="-1">BLUE</a>

  <div data-filter="red"></div>
  <div data-filter="blue"></div>
  <div data-filter="red"></div>
  <div data-filter="blue"></div>
  <div data-filter="green"></div>
  <div data-filter="red"></div>
  <div data-filter="red"></div>
  <div data-filter="red"></div>
  <div data-filter="blue"></div>
  <div data-filter="green"></div>
  <div data-filter="blue"></div>
  <div data-filter="green"></div>
  <div data-filter="green"></div>
</section>

Answer 2

默认隐藏全部，仅显示绿色：

div[data-filter] {
    height: 0px;
    width: 0px;
    border: none;
    margin: 0;
}
div[data-filter="green"] {
    height: 40px;
    width: 40px;
    border: 1px solid black;
    margin: 10px;
}

演示：http://jsfiddle.net/UybPY/719/

Answer 3

这是这样的：

$('div:not([data-filter="green"])').hide();

Demo

Answer 4

关于文档就绪使用如下

$(document).ready(function(){
    $('section div:not([data-filter="green"])').hide();
});

在加载时，它会查找具有属性＆＃34; data-filter＆＃34;的div。绿色和休息将被隐藏

这是合适的

Answer 5

试试吧......

$("div[data-filter!='green']").each(function (i, el) {
     //It'll be an array of elements
    $(this).hide();
 });

样本：http://jsfiddle.net/UybPY/717/