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 = "<" + index + "/" + totalRecord
            + ">";
    // 檢驗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(數組)

 

 相關推薦：

• javascript 跳出（終止）forEach循環
• js與jQuery實現方式對比匯總
• js與jQuery方法對比