zoukankan      html  css  js  c++  java

  • jquery中filter(fn)的使用研究

    jquery中filter(fn)给出的官方说明是：

    筛选出与指定函数返回值匹配的元素集合
    这个函数内部将对每个对象计算一次 (正如 '$.each'). 如果调用的函数返回false则这个元素被删除，否则就会保留。
     
    这个说明没有问题，可是给出的例子却有问题。例子是

    HTML 代码:

    <p><ol><li>Hello</li></ol></p><p>How are you?</p>

    jQuery 代码:

    $("p").filter(function(index) {   return $("ol", this).length == 0; });

    结果:

    [ <p>How are you?</p> ]
     
    可是大家在试的时候会发现，<p>中是不让放<ol>的，在一些浏览器会报错。
     
    我在自己的一个程序中，用到了filter(fn)这个方法。我就把我使用的例子放出来。
     
    我要做的功能其实很简单，就是要把一个页面中所有的<div>内容显示出来。这里面有些<div>的内容是动态加载的。
     
    [c-sharp] view plaincopy
    1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JqeryClick.aspx.cs" Inherits="AJAXEnabledWebApplication1.JqeryClick" %>  
    2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    3. <html xmlns="http://www.w3.org/1999/xhtml" >  
    4. <head runat="server">  
    5.     <title>无标题页</title>  
    6.       
    7.       
    8.     <mce:script src="jquery-1.3.2.min.js" mce_src="jquery-1.3.2.min.js" type="text/javascript"></mce:script>  
    9.       
    10.       
    11.     <mce:script type="text/javascript"><!--  
    12.        $(function(){  
    13.           $("#btn").click(function(){  
    14.             
    15.             //在ViewDiv中显示二种下拉列表当前被选中的内容。显示出来的是value值。  
    16.             $("#ViewDiv").html($("#ddlSel").val() + "-----" + $("#Select1").val());  
    17.               
    18.               
    19.             //这里有一点我要说明的事，我使用的.aspx文件，这种文件会在<form>内自己生成自己的几个<div>，它不是我要取的  
    20.             //所以在这里我加了一个大的div来取我们所要的。  
    21.               
    22.             //这里用filter(fn)来过滤掉里面包含ol的项  
    23.             $("#all").children("div").filter(function(index) {  
    24.                     return $("ol", this).size() == 0;  
    25.             }).each(function(index){  
    26.               
    27.             //这里显示出这些div的内容。请注意，在这里我们用  
    28.             //$("div",this).html()这种方法  
    29.                alert($("#"+this.id+"").html());  
    30.             });   
    31.           })  
    32.        })  
    33.       
    34. // --></mce:script>  
    35. </head>  
    36. <body>  
    37.     <form id="form1" runat="server">  
    38.     <div id="all">  
    39.     <div id="one">  
    40.         <asp:DropDownList ID="ddlSel" runat="server">  
    41.             <asp:ListItem Value="1">第一项</asp:ListItem>  
    42.             <asp:ListItem Value="2">第二项</asp:ListItem>  
    43.         </asp:DropDownList>  
    44.         <select id="Select1">  
    45.             <option value="3">第三项</option>  
    46.             <option value="4">第四项</option>  
    47.         </select>  
    48.         <input id="btn" type="button" value="显示信息" /></div>  
    49.       
    50.     <div id="ViewDiv"></div>  
    51.       
    52.       
    53.       
    54.     <div id="2"><ol><li>Hello</li></ol></div><div id="1">How are you?</div>   
    55.       
    56.     </div>  
    57.     </form>  
    58. </body>  
    59. </html>  
  • 相关阅读:
    转载算法达人修炼营实践模板
    win7上面已经安装了mysql，但是net start mysql提示服务名无效
    如何读懂c++源码？
    struts2 DMI无法运行
    spring下配置dbcp,c3p0,proxool
    前端VS后台
    jsp以及servlet中文乱码问题
    文件上传
    注册和验证的实现
    网站访问计数器的设计
  • 原文地址：https://www.cnblogs.com/ranzige/p/4026729.html
Copyright © 2011-2022 走看看