JQuery通过自定义属性重新排序复杂的div

Question

我已尝试使用JQuery重新排序项目列表时使用了20种不同的变体，并且其中每一项都未能成为我所需要的。所以，这里很简单：

我有一个带有一系列div的div（内嵌divs！）。 Divs通过其他功能添加到本系列中，并且不考虑订单。

<div class="span12" style="padding: 10px;" id="DLRemRows" name="DLRemRows">
    <strong>Member of Distribution Lists:</strong>
    <input type="hidden" name="customerId" id="customerId" value="fe6fcdae-6159-44f8-8075-50a9fa272ece" />

    <div class="row-fluid" style="border-top: 1px dashed rgb(200, 200, 200);" id="row_12" name="All My Children">
        <div class="span7" style="min-height: 25px;">All My Children</div>
        <div class="span4" style="min-height: 25px; text-align: right;">
            <input type="button" name="dlRemove" class="link btn-link dlRemove" value="Remove from List" />
            <input type="hidden" name="distListId" id="distListId" class="distListId" value="12" />
        </div>
        <div class="span1">
            <input type="hidden" name="distListText" id="distListText" class="distListText" value="All My Children" />
        </div>
    </div>
    <div class="row-fluid" style="border-top: 1px dashed rgb(200, 200, 200);" id="row_11" name="Winter is Coming">
        <div class="span7" style="min-height: 25px;">Winter is Coming</div>
        <div class="span4" style="min-height: 25px; text-align: right;">
            <input type="button" name="dlRemove" class="link btn-link dlRemove" value="Remove from List" />
            <input type="hidden" name="distListId" id="distListId" class="distListId" value="11" />
        </div>
        <div class="span1">
            <input type="hidden" name="distListText" id="distListText" class="distListText" value="Winter is Coming" />
        </div>
    </div>
    <div class="row-fluid" style="border-top: 1px dashed rgb(200, 200, 200);" id="row_13" name="House Stark">
        <div class="span7" style="min-height: 25px;">House Stark</div>
        <div class="span4" style="min-height: 25px; text-align: right;">
            <input type="button" name="dlRemove" class="link btn-link dlRemove" value="Remove from List" />
            <input type="hidden" name="distListId" id="distListId" class="distListId" value="13" />
        </div>
        <div class="span1">
            <input type="hidden" name="distListText" id="distListText" class="distListText" value="House Stark" />
        </div>
    </div>
    <div class="row-fluid" style="border-top: 1px dashed rgb(200, 200, 200);" id="row_7" name="Anderson and Axiom">
        <div class="span7" style="min-height: 25px;">Anderson and Axiom</div>
        <div class="span4" style="min-height: 25px; text-align: right;">
            <input type="button" name="dlRemove" class="link btn-link dlRemove" value="Remove from List" />
            <input type="hidden" name="distListId" id="distListId" class="distListId" value="7" />
        </div>
        <div class="span1">
            <input type="hidden" name="distListText" id="distListText" class="distListText" value="Anderson and Axiom" />
        </div>
    </div>
    <div class="row-fluid" style="border-top: 1px dashed rgb(200, 200, 200);" id="row_10" name="Axiom without Luis">
        <div class="span7" style="min-height: 25px;">Axiom without Luis</div>
        <div class="span4" style="min-height: 25px; text-align: right;">
            <input type="button" name="dlRemove" class="link btn-link dlRemove" value="Remove from List" />
            <input type="hidden" name="distListId" id="distListId" class="distListId" value="10" />
        </div>
        <div class="span1">
            <input type="hidden" name="distListText" id="distListText" class="distListText" value="Axiom without Luis" />
        </div>
    </div>
    <div class="row-fluid" style="border-top: 1px dashed rgb(200, 200, 200);" id="row_6" name="All except Bank">
        <div class="span7" style="min-height: 25px;">All except Bank</div>
        <div class="span4" style="min-height: 25px; text-align: right;">
            <input type="button" name="dlRemove" class="link btn-link dlRemove" value="Remove from List" />
            <input type="hidden" name="distListId" id="distListId" class="distListId" value="6" />
        </div>
        <div class="span1">
            <input type="hidden" name="distListText" id="distListText" class="distListText" value="All except Bank" />
        </div>
    </div>
    <div class="row-fluid" style="border-top: 1px dashed rgb(200, 200, 200);" id="row_15" name="testing the list">
        <div class="span7" style="min-height: 25px;">testing the list</div>
        <div class="span4" style="min-height: 25px; text-align: right;">
            <input type="button" name="dlRemove" class="link btn-link dlRemove" value="Remove from List" />
            <input type="hidden" name="distListId" id="distListId" class="distListId" value="15" />
        </div>
        <div class="span1">
            <input type="hidden" name="distListText" id="distListText" class="distListText" value="testing the list" />
        </div>
    </div>
    <div class="row-fluid" style="border-top: 1px dashed rgb(200, 200, 200);" id="row_9" name="Axiom">
        <div class="span7" style="min-height: 25px;">Axiom</div>
        <div class="span4" style="min-height: 25px; text-align: right;">
            <input type="button" name="dlRemove" class="link btn-link dlRemove" value="Remove from List" />
            <input type="hidden" name="distListId" id="distListId" class="distListId" value="9" />
        </div>
        <div class="span1">
            <input type="hidden" name="distListText" id="distListText" class="distListText" value="Axiom" />
        </div>
    </div>
    <div class="row-fluid" style="border-top: 1px dashed rgb(200, 200, 200);" id="row_14" name="Axiom Emails">
        <div class="span7" style="min-height: 25px;">Axiom Emails</div>
        <div class="span4" style="min-height: 25px; text-align: right;">
            <input type="button" name="dlRemove" class="link btn-link dlRemove" value="Remove from List" />
            <input type="hidden" name="distListId" id="distListId" class="distListId" value="14" />
        </div>
        <div class="span1">
            <input type="hidden" name="distListText" id="distListText" class="distListText" value="Axiom Emails" />
        </div>
    </div>
</div>

我的目标是在添加新内容时重新排序此列表，从而使列表保持（不区分大小写）的alpha顺序。

我决定允许使用插件，只要它们很小。我正在研究的是TinySort。

排序必须是 row-fluid div中的 name 属性。

结果将是：

<div class="span12" style="padding: 10px;" id="DLRemRows" name="DLRemRows">
    <strong>Member of Distribution Lists:</strong>
    <input type="hidden" name="customerId" id="customerId" value="fe6fcdae-6159-44f8-8075-50a9fa272ece" />        

    <div class="row-fluid" style="border-top: 1px dashed rgb(200, 200, 200);" id="row_6">
        <div class="span7" style="min-height: 25px;">All except Bank</div>
        <div class="span4" style="min-height: 25px; text-align: right;">                
            <input type="button" name="dlRemove" class="link btn-link dlRemove" value="Remove from List" />                
            <input type="hidden" name="distListId" id="distListId" class="distListId" value="6" />
        </div>
        <div class="span1">
            <input type="hidden" name="distListText" id="distListText" class="distListText" value="All except Bank" />
        </div>
    </div>

    <div class="row-fluid" style="border-top: 1px dashed rgb(200, 200, 200);" id="row_12">
        <div class="span7" style="min-height: 25px;">All My Children</div>
        <div class="span4" style="min-height: 25px; text-align: right;">                
            <input type="button" name="dlRemove" class="link btn-link dlRemove" value="Remove from List" />                
            <input type="hidden" name="distListId" id="distListId" class="distListId" value="12" />
        </div>
        <div class="span1">
            <input type="hidden" name="distListText" id="distListText" class="distListText" value="All My Children" />
        </div>
    </div>

    <div class="row-fluid" style="border-top: 1px dashed rgb(200, 200, 200);" id="row_7">
        <div class="span7" style="min-height: 25px;">Anderson and Axiom</div>
        <div class="span4" style="min-height: 25px; text-align: right;">                
            <input type="button" name="dlRemove" class="link btn-link dlRemove" value="Remove from List" />                
            <input type="hidden" name="distListId" id="distListId" class="distListId" value="7" />
        </div>
        <div class="span1">
            <input type="hidden" name="distListText" id="distListText" class="distListText" value="Anderson and Axiom" />
        </div>
    </div>

    <div class="row-fluid" style="border-top: 1px dashed rgb(200, 200, 200);" id="row_9">
        <div class="span7" style="min-height: 25px;">Axiom</div>
        <div class="span4" style="min-height: 25px; text-align: right;">                
            <input type="button" name="dlRemove" class="link btn-link dlRemove" value="Remove from List" />                
            <input type="hidden" name="distListId" id="distListId" class="distListId" value="9" />
        </div>
        <div class="span1">
            <input type="hidden" name="distListText" id="distListText" class="distListText" value="Axiom" />
        </div>
    </div>

    <div class="row-fluid" style="border-top: 1px dashed rgb(200, 200, 200);" id="row_14">
        <div class="span7" style="min-height: 25px;">Axiom Emails</div>
        <div class="span4" style="min-height: 25px; text-align: right;">                
            <input type="button" name="dlRemove" class="link btn-link dlRemove" value="Remove from List" />                
            <input type="hidden" name="distListId" id="distListId" class="distListId" value="14" />
        </div>
        <div class="span1">
            <input type="hidden" name="distListText" id="distListText" class="distListText" value="Axiom Emails" />
        </div>
    </div>

    <div class="row-fluid" style="border-top: 1px dashed rgb(200, 200, 200);" id="row_10">
        <div class="span7" style="min-height: 25px;">Axiom without Luis</div>
        <div class="span4" style="min-height: 25px; text-align: right;">                
            <input type="button" name="dlRemove" class="link btn-link dlRemove" value="Remove from List" />                
            <input type="hidden" name="distListId" id="distListId" class="distListId" value="10" />
        </div>
        <div class="span1">
            <input type="hidden" name="distListText" id="distListText" class="distListText" value="Axiom without Luis" />
        </div>
    </div>

    <div class="row-fluid" style="border-top: 1px dashed rgb(200, 200, 200);" id="row_13">
        <div class="span7" style="min-height: 25px;">House Stark</div>
        <div class="span4" style="min-height: 25px; text-align: right;">                
            <input type="button" name="dlRemove" class="link btn-link dlRemove" value="Remove from List" />                
            <input type="hidden" name="distListId" id="distListId" class="distListId" value="13" />
        </div>
        <div class="span1">
            <input type="hidden" name="distListText" id="distListText" class="distListText" value="House Stark" />
        </div>
    </div>

    <div class="row-fluid" style="border-top: 1px dashed rgb(200, 200, 200);" id="row_15">
        <div class="span7" style="min-height: 25px;">testing the list</div>
        <div class="span4" style="min-height: 25px; text-align: right;">                
            <input type="button" name="dlRemove" class="link btn-link dlRemove" value="Remove from List" />                
            <input type="hidden" name="distListId" id="distListId" class="distListId" value="15" />
        </div>
        <div class="span1">
            <input type="hidden" name="distListText" id="distListText" class="distListText" value="testing the list" />
        </div>
    </div>

    <div class="row-fluid" style="border-top: 1px dashed rgb(200, 200, 200);" id="row_11">
        <div class="span7" style="min-height: 25px;">Winter is Coming</div>
        <div class="span4" style="min-height: 25px; text-align: right;">                
            <input type="button" name="dlRemove" class="link btn-link dlRemove" value="Remove from List" />                
            <input type="hidden" name="distListId" id="distListId" class="distListId" value="11" />
        </div>
        <div class="span1">
            <input type="hidden" name="distListText" id="distListText" class="distListText" value="Winter is Coming" />
        </div>
    </div>        
</div>

我已经有了将div行添加到主父div（ DLRemRows ）的方法，所以我只需要提出一个函数来对它们后面的行进行排序＆＃ 39;重新附加。

Answer 1

通过说＆＃34;没有插件＆＃34;发生了我是一个工具，我看了几个。我最终选择了TinySort，它使用一行代码令人钦佩：

$('#DLRemRows > div.row-fluid').tsort({ attr: 'name' });