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

-2

我试过用JQuery重新排序项目列表的20个不同变体，并且它们中的每一个都没有成为我所需要的。所以，这里是简单的：JQuery通过自定义属性重新排列复杂的div

我有一系列divs insis的div（在它们中嵌套的div！）。 Div通过其他功能添加到本系列，并且不考虑订单。

<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>

我的目标是重新排序时，一些新的东西被添加到它，从而保持在（不区分大小写）字母顺序列表这个列表。

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

该排序必须由名称属性排液 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_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）的方法，所以我只需要拿出一个函数来完成它们被追加后的排序。

来源

2014-11-21 PKD

请考虑写一个库，然后当你说没有自定义代码！任何方式都使用'$（'。row-fluid .span7'）。text（）'重新排序项目 – 2014-11-21 17:45:46

这里试试'var arr = []; （）。$（this）.parents（'。row（'。row-fluid .span7'）。each（function（）{0} -fluid'） \t} \t arr.push（OBJ）; \t \t //这应该产生阵列等 \t // [{ “所有除银行”：HTMLOBJ}] HTMLOBJ =>对应于您的.row - 对应于给定文本的流体 \t //使用obj的名称对数组进行排序}）;' – 2014-11-21 17:50:23

如果您知道使用TinySort执行此操作的简单方法，那么我也会对此进行公开。 – PKD 2014-11-21 18:02:15

它发生了，因为我是一个工具，说“没有插件”，我看了几个。我结束了与TinySort，这与令人钦佩的单行代码作品：

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

来源

2014-11-21 18:05:33 PKD

伟大的工作！呦发现你自己的解决方案！ – 2014-11-21 18:06:31

是的 - 有一个原因，我不打算“允许”插件 - 我不想膨胀我的代码库比以前更多。但是我意识到TinySort的缩小的js不会导致任何臃肿，并且可以为我带来一些好处。我必须承认，虽然我为什么让自己的问题陷入低谷，但我有点困惑。 – PKD 2014-11-21 18:27:41

不知道downvote。可能是因为它说没有使用外部库，也没有自定义代码。 – 2014-11-21 18:30:41

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

回答

相关问题