jquery+css属性过滤选择

最新推荐文章于 2022-08-16 22:48:02 发布

原创最新推荐文章于 2022-08-16 22:48:02 发布 · 2.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #css

JavaScript 专栏收录该内容

35 篇文章

订阅专栏

本文介绍如何使用jQuery结合CSS属性过滤实现动态元素的选择与操作。通过示例代码展示如何为循环生成的HTML元素设置特定的ID前缀，并通过jQuery选择器进行高效的操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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();
    });