1. 当前所在位置:
  2. 首页
  3. 捕鱼大师

jQuery 遍历 - filter() 方法

2018-12-28 admin
  实例
 
  改变所有div的颜色,然后向类名为"middle"的类添加边框:
 
  $("div").css("background","#c8ebcc")
 
  .filter(".middle")
 
  .css("border-color","red");
 
  亲自试一试
 
  定义和用法
 
  filter()方法将匹配元素集合缩减为匹配指定选择器的元素。
 
  语法
 
  .filter(selector)
 
  参数 描述
 
  selector 字符串值,包含供匹配当前元素集合的选择器表达式。
 
  详细说明
 
  如果给定表示DOM元素集合的jQuery对象,.filter()方法会用匹配元素的子集构造一个新的jQuery对象。所使用的选择器会测试每个元素;所有匹配该选择器的元素都会包含在结果中。
 
  请思考下面这个拥有简单列表的页面:
 
  <ul>
 
  <li>listitem1</li>
 
  <li>listitem2</li>
 
  <li>listitem3</li>
 
  <li>listitem4</li>
 
  <li>listitem5</li>
 
  <li>listitem6</li>
 
  </ul>
 
  我们可以向这个列表项集合应用该方法:
 
  $('li').filter(':even').css('background-color','red');
 
  亲自试一试
 
  此调用的结果是将项目1,3,5的背景设置为红色,这是因为它们都匹配选择器(回忆一下,:even和:odd均使用基于0的index)。
 
  使用过滤函数
 
  使用该方法的第二个形式是,通过函数而不是选择器来筛选元素。对于每个元素,如果该函数返回true,则元素会被包含在已筛选集合中;否则,会排除这个元素。
 
  请看下面这段稍显复杂的HTML片段:
 
  <ul>
 
  <li><strong>list</strong>item1-onestrongtag</li>
 
  <li><strong>list</strong>item<strong>2</strong>
 
  -two<span>strongtags</span></li>
 
  <li>listitem3</li>
 
  <li>listitem4</li>
 
  <li>listitem5</li>
 
  <li>listitem6</li>
 
  </ul>
 
  我们可以选取这些列表项,然后基于其内容来筛选它们:
 
  $('li').filter(function(index){
 
  return$('strong',this).length==1;
 
  }).css('background-color','red');
捕鱼驾到