365体育备用网址报道jQuery 遍历 - filter() 方法_365体育备用网址官网资讯

jQuery/jquery_ref_traversing.HTML" title="jQuery 参考手册 - 遍历">jQuery 遍历参考手册

实例

改变一切 div 的颜色,然后向类名为 "middle" 的类添加边框:

$("div").CSS("background", "#c8ebcc")
  .filter(".middle")
  .css("border-color", "red");

PHP?filename=jquery_traversing_filter">亲自试一试

定义和用法

filter() 方法将匹配元素集合缩减为匹配指定选择器的元素。

语法

.filter(selector)
参数 描述
selector 字符串值,包含供匹配当前元素集合的选择器表示式。

详细说明

如果给定表示 DOM 元素集合的 jQuery 对象,.filter() 方法会用匹配元素的子集构造一个新的 jQuery 对象。所使用的选择器会测验每个元素;一切匹配该选择器的元素都会包含在结果中。

请思索下面这个拥有简单列表的页面:

<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
  <li>list item 6</li>
</ul>

我们能够向这个列表项集合应用该方法:

$('li').filter(':even').css('background-color', 'red');

亲自试一试

此调用的结果是将项目 1, 3, 5 的背景设置为红色,这是因为它们都匹配选择器(回忆一下,:even 和 :odd 均使用基于 0 的 index)。

使用过滤函数

使用该方法的第二个形式是,通过函数而不是选择器来筛选元素。对于每个元素,如果该函数返回 true,则元素会被包含在已筛选集合中;否则,会排除这个元素。

请看下面这段稍显复杂的 HTML 片段:

<ul>
  <li><strong>list</strong> item 1 - one strong tag</li>
  <li><strong>list</strong> item <strong>2</strong>
   - two <span>strong tags</span></li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
  <li>list item 6</li>
</ul>

我们能够选取这些列表项,然后基于其内容来筛选它们:

$('li').filter(function(index) {
  return $('strong', this).length == 1;
}).css('background-color', 'red');
------分隔线----------------------------

公布评论 (180人察看0条评论)
请自觉遵守互联网相关的政策法规,严禁公布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换188金宝博娱乐城安全吗
最新评论