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

回答

相關問題