jquery遍历集合&数组的两种方式

CreateTime--2017年4月24日08:31:49
Author:Marydon

方法一：

$(function(){

    $("input:button").click(function(){

        $.getJSON("testAction",function(data){

            var content = "";

            /*方法一*/

            $(data).each(function(index,value){

                alert(value);

                content+='<div class="comment"><h6>' + value.name +'：</h6><p class="para">' + value.review +'</p></div>';

            });

            $("#resText").html(content);

        });

    });

});

方法二：

$(document).ready(function(){

    $("input:button").click(function(){

        $.getJSON("testAction",function(data){

            //$("#resText").empty();/*将该div的内容清空*/

            var content = "";

            /*方法二*/

            $.each(data,function(index,value){

                content+='<div class="comment"><h6>' + value.name +'：</h6><p class="para">' + value.review +'</p></div>';

            });

            $("#resText").html(content);

        });

    });

});

注意事项：
　　1.字符串的拼接
　　2.$("要获取的标签").html("展示在该标签里的内容");//将会覆盖掉原来标签里的所有内容；
　　　$("要获取的标签").empty();//将该标签里的内容置空
　　3.字符串与变量相互拼接问题
　　　　a.字符串拼接变量:
　　　　　　"testJsonAction?param1=" + 变量名1 + "&param2=" + 变量名2 + "&param_n=" + 变量n;
　　　　b.字符串拼接变量，再拼接字符串
　　　　　　'<div class="comment"><h6>' + value +'</h6></div>'

UpdateTime--2017年6月30日18:40:37

二、jQuery遍历标签

　　HTML部分一

<div id="jyDiv" class="Container">

    <table cellspacing="0" cellpadding="1" border="0" oldClass="TableRow" class="TableRow"

        onclick="javascript:RowSelect(this);consAppl_search.searchInspectDetail(this);" key="0" inspectId="" totalRecord="0"

        width="100%" onmouseover="javascript:if (this.className!='TableRowSelected') this.className='TableRowOver'"

        onmouseout="javascript:if (this.className!='TableRowSelected') this.className='TableRow'">

        <tbody>

            <tr>

                <td class="medical_table_cell">

                    检验单名称

                    <!-- 必要参数：检验单号 -->

                    <input type="hidden" name="ASSAY_NO" value="" />

                    <!-- 检验单名称 -->

                    <input type="hidden" name="ASSAY_NAME" value="" />

                    <!-- 必要参数：标本号 -->

                    <input type="hidden" name="SAMPLE_NO" value="" />

                    <!-- 标本名称 -->

                    <input type="hidden" name="SAMPLE_NAME" value="" />

                    <!-- 送检医生 -->

                    <input type="hidden" name="SEND_DOCTOR" value="" />

                    <!-- 送检时间 -->

                    <input type="hidden" name="SEND_TIME" value="" />

                    <!-- 审核医生 -->

                    <input type="hidden" name="AUDIT_DOCTOR" value="" />

                    <!-- 审核时间 -->

                    <input type="hidden" name="AUDIT_TIME" value="" />

                    <!-- 化验医生 -->

                    <input type="hidden" name="TEST_DOCTOR" value="" />

                    <!-- 化验时间 -->

                    <input type="hidden" name="TEST_TIME" value="" />

                </td>

                <td class="medical_table_cell"></td>

            </tr>

            <tr>

                <td class="medical_table_cell">化验医生：</td>

                <td class="medical_table_cell">化验时间：</td>

            </tr>

        </tbody>

    </table>

</div>

　　HTML部分二

<div style="width: 99%; height: 98%; overflow: auto; margin: 0 auto;" id="inspectResContainer">

    <table class="Table" cellspacing="0" cellpadding="1" border="0">

        <tbody>

            <tr class="TableHeader" align="center">

                <td class="TableHeaderCell" nowrap="nowrap" width="13%">标本名称</td>

                <td class="TableHeaderCell" nowrap="nowrap">检验结果</td>

                <td class="TableHeaderCell" nowrap="nowrap" width="13%">结果单位</td>

                <td class="TableHeaderCell" nowrap="nowrap" width="13%">参考值</td>

                <td class="TableHeaderCell" nowrap="nowrap" width="13%">检验状态</td>

                <td class="TableHeaderCell" nowrap="nowrap" width="13%">特殊描述</td>

            </tr>

            <tr align="center" INSPECT_NO="">

                <td nowrap="nowrap" class="TableCell" align="left">

                    <!-- 必要参数：检验单号 -->

                    <input type="hidden" name="INSPECT_NO" value="" />

                    <!-- 检验单名称 -->

                    <input type="hidden" name="INSPECT_NAME" value="" />

                    <!-- 标本号 -->

                    <input type="hidden" name="SPEC_NO" value="" />

                    <!-- 标本名称 -->

                    <input type="hidden" name="SPEC_NAME" value="" />

                    <!-- 检验结果 -->

                    <input type="hidden" name="TEST_RESULT" value="" />

                    <!-- 检验状态 -->

                    <input type="hidden" name="TEST_STATUS" value="" />

                    <!-- 结果单位 -->

                    <input type="hidden" name="UNIT" value="" />

                    <!-- 参考值下限 -->

                    <input type="hidden" name="LOW" value="" />

                    <!-- 参考值上限 -->

                    <input type="hidden" name="HIGH" value="" />

                    <!-- 特殊描述 -->

                    <input type="hidden" name="DESCRIBE" value="" />

                </td>

                <td nowrap="nowrap" class="TableCell" align="left"></td>

                <td nowrap="nowrap" class="TableCell" align="left"></td>

                <td nowrap="nowrap" class="TableCell" align="left"></td>

                <td nowrap="nowrap" class="TableCell" align="left"></td>

                <td nowrap="nowrap" class="TableCell" align="left"></td>

            </tr>

        </tbody>

    </table>

</div>

　　方法一：$().each(function(不带参){})

/**

 * 查看检验详情

 *

 * @param obj

 *            检验列表table对象

 */

this.searchInspectDetail = function(obj) {

    // 索引号

    var index = obj.getAttribute('key');

    // 总记录数

    var totalRecord = obj.getAttribute('totalRecord');

    // 将计数放到这里面

    $get('showCountResult4').innerHTML = "&lt;" + index + "/" + totalRecord

            + "&gt;";

    // 检验Id

    var inspectId = obj.getAttribute('inspectId');

    // 获取检验单table所有的tr（除去第一行）

    var inspectTrs = $('#inspectResContainer>table tr:gt(0)');

    $(inspectTrs).each(function(){

        // 获取自定义属性inspect_no

        var inspect_no = $(this).attr('inspect_no');

        // 相同显示，不同隐藏

        if (inspect_no == inspectId) {

            $(this).show();

        } else {

            $(this).hide();

        }

    });

}

　　方法二：$().each(function(带参){})

$('#jyDiv > table').each(function(index){

    $(this).attr("key",index+1);

    $(this).attr("totalRecord",i);

});

　　注意：参数所代表的含义见文章javascript-Array(数组)

 

jquery遍历集合&数组&标签的更多相关文章

  1. Jquery遍历筛选数组的几种方法和遍历解析json对象|Map()方法详解

    Jquery遍历筛选数组的几种方法和遍历解析json对象|Map()方法详解 一.Jquery遍历筛选数组 1.jquery grep()筛选遍历数组 $().ready( function(){ v ...

  2. JQuery遍历json数组的3种方法

    这篇文章主要介绍了JQuery遍历json数组的3种方法,本文分别给出了使用each.for遍历json的方法,其中for又分成两种形式,需要的朋友可以参考下 一.使用each遍历 $(functio ...

  3. jquery遍历对象,数组,集合

    1.jquery 遍历对象 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTM ...

  4. JQuery 遍历 操作数组 map、grep、filter 的区别

    filter() 方法将匹配元素集合缩减为匹配指定选择器的元素.例如:改变所有 div 的颜色,然后向类名为 "middle" 的类添加边框:$("div"). ...

  5. jQuery遍历集合

     jQuery 遍历List集合 $(function(){ var tbody = ""; var obj =[{"name ":"xxxx&quo ...

  6. 【转】 jquery遍历json数组方法

    $(function () { var tbody = ""; //------------遍历对象 .each的使用------------- //对象语法JSON数据格式(当服 ...

  7. jquery遍历筛选数组的几种方法和遍历解析json对象

    jquery grep()筛选遍历数组 $().ready(    function(){        var array = [1,2,3,4,5,6,7,8,9];        var fil ...

  8. jQuery遍历Json数组

    var jsonArray=  [{ "name": "张三", "password": "123456"},{ &qu ...

  9. jQuery 遍历json数组的实现代码

    <script type="text/javascript"> "}]; $(d1).each(function(){ alert(this.text+&qu ...

随机推荐

  1. 漫谈js自定义事件、DOM/伪DOM自定义事件

    一.说明.引言 我JS还是比较薄弱的,本文的内容属于边学边想边折腾的碎碎念,可能没什么条理,可能有表述不准确的地方,可能内容比较拗口生僻.如果您时间紧迫,或者JS造诣已深,至此您就可以点击右侧广告(木 ...

  2. android手机安全：被攻陷的一个场景

     到处找WIFI,对于我们的手机控来说是相当普遍的了.假设你发现了有可用的wifi,并选择了浏览器连接,当浏览器出现一个web 页面的时候,你可能已经中招了. 相同,当你的手机使用一些免费应用的时候, ...

  3. C#程序集系列01,用记事本编写C#,IL代码,用DOS命令编译程序集,运行程序

    本篇主要体验:编写C#,IL代码,用"VS2012开发人员命令提示"编译成程序集,并运行程序. □ C#文件编译为程序集 →在F盘创建as文件夹→在as文件夹下创建MyClass. ...

  4. java基础知识概要图

  5. docker Redis的主从配置

    redis是k-v型nosql数据库,支持字符串(string).列表(list).集合(set).散列(hash).有序集合(zset:形如member:score的散列集合,其中member为成员 ...

  6. Java读取properties配置文件时，中文乱码解决方法

    public static String getConfig(String key) { Properties pros = new Properties(); String value = &quo ...

  7. 《Windows核心编程》第2章——字符和字符处理

    ANSI和UNICODE 计算char和wchar_t的长度都一样,都是5,但是二者在内存中的布局实际上是不同的:

  8. 【转载】如果快速开发APP&创业

    先贴原文所在个人博客: http://uikoo9.com/ 今天看了一些这个人的文章,还是有一定见解的,比如下面这篇 <如何快速开发出一个高质量的APP——创业谈> http://uik ...

  9. iOS开发-iPad侧边栏Tab选项卡切换

    Android中习惯了叫侧边栏,iOS中如果不习惯侧边栏称呼的话可以叫dock,侧边栏的切换,类似于Android中的底部导航栏的切换,iPad尺寸大了一些,导航的栏目放在侧边会显示的更好耐看一些.选 ...

  10. CloudStack无法添加模板和iso

    做了N久的CloudStack二次开发,最近越来越多的人开始使用CloudStack. 通常会遇到添加模板和iso不成功的问题. 表现为注册了template/iso之后,"已就绪" ...