jqueryの検証で動的リストに番号を付ける

Question

表示リスト項目を数値形式で表示するために最上位リストを取得しようとしています。

これを行うには、「続行」をクリックして、表示されているリスト項目を見つけて、<li></li>にラップします。

$('.btn-submit-val').on('click', function() { 
    $('.error-menu a > label:visible').wrap('<li></li>'); 
    $('.error-menu a > label:hidden').unwrap('<li></li>'); 
}); 

あなたはこのようなリストを持っている場合：

1. [last name error]

をそして、それは表示されません：

<ol class="error-message-container error-menu"> 
    <a href="#firstName"><label class="error" for="firstName" generated="true" style="display:none;"></label></a> 
    <a href="#lastName"><label class="error" for="lastName" generated="true"></label></a> 
</ol> 

は、次にページが表示されます

1. 2. [last name error]

基本的に、エラーがなければページには表示されず、数値リスト順に表示されません。

現在ページ上のフィールドを検証すると、数字は引き続きその横に表示されます。番号を削除し、数値の順序を保持します。これは可能ですか？

フィドル：要素が開封された取得されていません

$('.error-menu a > label:hidden').unwrap('<li></li>');

：https://jsfiddle.net/DTcHh/25848/

Answer 1

あなたの問題は、この由来します。アイテムの順序を保持したいので、これはおそらくより良い方法です。

フォームフィールドの検証後に要素全体を隠すと、簡単に問題を解決できます。

要素がアンラップされていない理由については、the difference between visibility:hidden and display:noneを読むことをお勧めします。display：noneを使用して要素を非表示にしますが、可視性をチェックする：hidden。

<li></li>をマークアップに追加し、ラベルの表示を変更するのと同じ方法で表示を変更することをおすすめします。このようにして、要素をラップ/アンラップする必要はありません。代わりに、2つのCSSクラス（.hide{display:none}.show{display:block;}）を利用して、既にコードの一部で使用している.addClass()/.removeClass()経由で追加できます。

こちらがお役に立てば幸いです。