jquery+css属性过滤选择

jquery+css属性过滤选择

当页面需要循环遍历出一个需求，假设是一个table的tr,由于是用循环遍历，我们不可能随意去给每个tr,td 的id,class或者其他属性取一个名字。这时可以利用实体类中的变化属性如id来给每个tr,td 的id,class或者其他属性取一个名字，
例如：div_实体类id, ‘div’仅仅是一个前缀名称，可任意取名； ‘_’用于分割，其他特殊字符也可以使用；

html：

@foreach (var s in Model.RoleList)
    {
        <tr>          
            <td class="text-center">
                <span id="sp_@s.id">@s.name</span>                
            </td>
            <td class="text-center">
                <span id="sp2_@s.id">@s.describe</span>               
            </td>
            <td class="text-center">
                <input type="button" class="btn btn-xs btn-info" id="editOnly_@s.id" value="编辑" style="display: inline-block;">
                <input type="button" class="btn btn-xs btn-info" id="cancel_@s.id" value="取消" style="display: none;">&nbsp;
                <input type="button" class="btn btn-xs btn-success" id="saveOnly_@s.id" value="保存" style="display: none;">
                &nbsp;<input type="button" class="btn btn-xs btn-danger" id="del_@s.id" value="删除" style="display: inline-block;">
            </td>
        </tr>

    }

js:

     //选择所有id属性以'editOnly_'开头的input元素
     $("input[id^='editOnly_']").click(function () {
        //获取id,并分割，num[1]便是分割出来的当前tr对应实体类id
        var num = $(this).attr("id").split("_");
        $("#editOnly_" + num[1]).hide();
        $("#sp_" + num[1]).hide();
        $("#sp2_" + num[1]).hide();
        $("#del_" + num[1]).hide();
        $("#saveOnly_" + num[1]).show();
        $("#cancel_" + num[1]).show();
        $("#div_" + num[1]).show();
        $("#div2_" + num[1]).show();
    });