使用jQuery对DOM元素进行字母排序的专业指南

// 假设我们的目标容器是 #assignedMemberList
var $parentContainer = $("#assignedMemberList");
var $sortableItems = $parentContainer.children('.list-group-item');

// 映射元素及其排序值
var mappedItems = $sortableItems.map(function() {
    var $elem = $(this);
    // 优先使用data-sort-key属性，如果不存在则使用元素的文本内容
    // 将值转换为小写以进行不区分大小写的排序
    var sortValue = ($elem.data('sortKey') || $elem.text()).toLowerCase();
    return {
        element: this, // 存储原始DOM元素
        value: sortValue // 存储用于比较的值
    };
}).get(); // .get() 将jQuery对象转换为原生JavaScript数组

// 对映射后的数组进行排序
mappedItems.sort(function(a, b) {
    return a.value.localeCompare(b.value);
});

// 将排序后的元素重新追加到父容器
$.each(mappedItems, function(index, item) {
    $parentContainer.append(item.element);
});

(function($) {
    /**
     * 对指定父容器的子元素进行字母排序。
     *
     * @param {string} [childSelector='.list-group-item'] 可选参数，用于选择要排序的子元素。
     * @param {string} [dataKey='sortKey'] 可选参数，指定用于排序的数据属性键（如 'sortKey' 对应 data-sort-key）。
     *                                      如果未提供或元素没有该数据属性，则使用元素的文本内容。
     * @returns {jQuery} 返回原始的jQuery对象，以支持链式调用。
     */
    $.fn.sortChildrenAlphabetically = function(childSelector, dataKey) {
        // 确保 'this' 指向父容器
        var $parent = this;
        var actualChildSelector = childSelector || '.list-group-item'; // 默认子元素选择器
        var actualDataKey = dataKey || 'sortKey'; // 默认数据属性键

        var $children = $parent.children(actualChildSelector);

        // 1. 映射元素及其排序值
        var mapped = $children.map(function() {
            var $elem = $(this);
            var sortValue = $elem.data(actualDataKey) || $elem.text();
            return {
                elem: this, // 存储原始DOM元素
                value: String(sortValue).toLowerCase() // 转换为字符串并小写，进行不区分大小写比较
            };
        }).get(); // 将jQuery集合转换为原生JS数组

        // 2. 排序映射后的数组
        mapped.sort(function(a, b) {
            return a.value.localeCompare(b.value);
        });

        // 3. 将排序后的元素重新追加到父容器
        // 遍历并重新追加元素会自动将其从旧位置移除并插入到新位置
        $.each(mapped, function(index, item) {
            $parent.append(item.elem);
        });

        return $parent; // 支持链式调用
    };
})(jQuery);

// 示例用法
$(document).ready(function() {
    // 对 #assignedMemberList 中的 .list-group-item 元素进行排序
    // 默认使用 data-sort-key 或文本内容
    $("#assignedMemberList").sortChildrenAlphabetically();

    // 如果有其他列表，例如 #anotherList 中的 .my-item 元素，并使用 data-name 排序
    // $("#anotherList").sortChildrenAlphabetically('.my-item', 'name');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="col-lg-2 col-md-3 col-sm-6 col-xs-12" id="divClinicalManagementAssignMemberPanel">
    <div class="panel panel-primary" id="assignMemberPanel">
        <div class="panel-heading clickable ui-sortable-handle" style="text-align: center">
            ASSIGNED PATIENTS (<span id="assignMemberCount">0</span>)
        </div>
        <div class="panel-body assign-member-panel-body" id="assignMemberPanelBody">
            <div class="row">
                <div class="col-md-12">
                    <input type="text" placeholder="Search" id="assignedMemberTxt" class="form-control" />
                    <div id="listAssignPatientContainer" class="overflowAuto well well-sm" style="height: 300px">
                        <div id="assignedMemberList" class="list-group">
                            <!-- 待排序的元素将在这里 -->
                            <div class="list-group-item" data-sort-key="Water">Water</div>
                            <div class="list-group-item" data-sort-key="Lime">Lime</div>
                            <div class="list-group-item" data-sort-key="Banana">Banana</div>
                            <div class="list-group-item" data-sort-key="Melon">Melon</div>
                            <div class="list-group-item" data-sort-key="Apple">Apple</div>
                            <div class="list-group-item" data-sort-key="grape">Grape</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 您的JavaScript代码应放在这里或外部JS文件中 -->
<script>
    // 粘贴上面定义的jQuery插件代码
    (function($) {
        $.fn.sortChildrenAlphabetically = function(childSelector, dataKey) {
            var $parent = this;
            var actualChildSelector = childSelector || '.list-group-item';
            var actualDataKey = dataKey || 'sortKey';

            var $children = $parent.children(actualChildSelector);

            var mapped = $children.map(function() {
                var $elem = $(this);
                var sortValue = $elem.data(actualDataKey) || $elem.text();
                return {
                    elem: this,
                    value: String(sortValue).toLowerCase()
                };
            }).get();

            mapped.sort(function(a, b) {
                return a.value.localeCompare(b.value);
            });

            $.each(mapped, function(index, item) {
                $parent.append(item.elem);
            });

            return $parent;
        };
    })(jQuery);

    // 页面加载完成后执行排序
    $(document).ready(function() {
        $("#assignedMemberList").sortChildrenAlphabetically();
    });
</script>