jQuery 获取XXX标签的id/name以XXX开始/结尾的集合

最新推荐文章于 2022-04-12 15:04:09 发布

原创最新推荐文章于 2022-04-12 15:04:09 发布 · 2.7k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#JavaScript #jQuery #HTML

JavaScript 同时被 3 个专栏收录

1 篇文章

订阅专栏

jQuery

1 篇文章

订阅专栏

HTML

1 篇文章

订阅专栏

本文介绍了一种在前端开发中高效筛选HTML元素的方法，通过自定义函数getStartLabelArr和getEndLabelArr，开发者可以轻松地根据ID或名称的前缀或后缀来获取元素集合。这种方法提高了代码的灵活性和可读性，适用于快速定位特定元素进行样式修改或事件绑定。

    /**
     * 获取...标签的id/name以...开头的集合
     * @param tag       html标签
     * @param prefix    前缀
     * @param attr      id/name
     * @returns {jQuery|HTMLElement}
     */
    function getStartLabelArr(tag, prefix, attr) {
        if (attr === "id") {
            return $(tag + "[id^='" + prefix + "']");
        } else if (attr === "name") {
            return $(tag + "[name^='" + prefix + "']");
        } else {
            return null;
        }
    }

    /**
     * 获取...标签的id/name以...结尾的集合
     * @param tag       html标签
     * @param suffix    后缀
     * @param attr      id/name
     * @returns {jQuery|HTMLElement}
     */
    function getEndLabelArr(tag, suffix, attr) {
        if (attr === "id") {
            return $(tag + "[id$='" + suffix + "']");
        } else if (attr === "name") {
            return $(tag + "[name$='" + suffix + "']");
        } else {
            return null;
        }
    }

        //使用示例1，获取<tr>标签的id以trainParticipateTrainingUserList开始的array
        var trArr = getStartLabelArr("tr", "trainParticipateTrainingUserList", "id");
        console.log(trArr.length);

        //使用示例2，获取<select>标签的id以_user_id结尾的array
        var endLabelArr = getEndLabelArr("select", "_user_id", "id");
        console.log(endLabelArr.length);