jquery遍历集合&数组&标签

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(数组)

 

posted @ 2017-03-13 15:28  Marydon  阅读(6328)  评论(0)  编辑  收藏  举报