Jquery 按数据属性按字母顺序放置div

我试图将div按字母顺序排列，但jQuery代码失败：

var $wrapper = $('.modal .row');
$wrapper.find('.txt_center').sort(function (a, b) {
return +a.getAttribute('data-ename') > +b.getAttribute('data-ename'); }).appendTo($wrapper);

html代码如下所示：

<div class="modal" id="staff" style="text-align: center;">

<div class="row txt_center">
    <div class="txt_center" data-ename="William Black">
        <p class="profile-name"><strong>William Black</strong>

        </p>
        <p class="profile-details">Title</p>
    </div>
    <div class="txt_center" data-ename="Ariel White">
        <p class="profile-name"><strong>Ariel White</strong>

        </p>
        <p class="profile-details">Title</p>
    </div>
    <div class="txt_center" data-ename="John Smith">
        <p class="profile-name"><strong>John Smith</strong>

        </p>
        <p class="profile-details">Title</p>
    </div>
    <div class="txt_center" data-ename="Vanessa Mae">
        <p class="profile-name"><strong>Vanessa Mae</strong>

        </p>
        <p class="profile-details">Title</p>
    </div>
</div>

威廉·布莱克

标题
Ariel White

标题
约翰·史密斯

标题
Vanessa Mae

标题

请帮助我解决JSFIDLE上的问题：

---

非常感谢您的帮助。

请使用下面的代码。这很接近你的功能。它获取数据属性“ename”并返回它。

$（a）.data（'ename'）

而不是

+a.getAttribute（'data-ename'）

var$wrapper=$（'.modal.row'）；
$wrapper.find（'.txt_center'）.sort（函数（a，b）{
返回$（a）.data（'ename'）>$（b）.data（'ename'）；
}).appendTo（$wrapper）

威廉·布莱克

标题
Ariel White

标题
约翰·史密斯

标题
Vanessa Mae

标题
如果将内部div替换为
ul
和
li
，则可以对其进行排序。看到这把小提琴了吗