在jQuery驗證中對動態列表進行編號

我試圖讓頂部列表以數字形式顯示可見列表項。在jQuery驗證中對動態列表進行編號

要做到這一點，我想說...在「繼續」點擊，找到可見的列表項並將它們包裝在<li></li>中。

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

所以，如果你有這樣的名單：

<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. [last name error]

，它不會顯示：

1. 2. [last name error]

所以基本上，如果錯誤不存在，它不會顯示在頁面上，也不會以數字列表順序顯示。

如果您在當前頁面上驗證字段，該號碼仍會顯示在旁邊。我想要刪除號碼並保留數字順序。這可能嗎？

小提琴：https://jsfiddle.net/DTcHh/25848/

來源

2016-10-04 bunnycode

您的問題源於此：

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

其中的元素沒有得到展開。這在某種程度上可能會更好，因爲您希望保留項目的順序。

如果您在驗證表單字段後隱藏了整個元素，則可以輕鬆解決您的問題。

現在至於爲什麼你的元素沒有解開，我建議你閱讀the difference between visibility:hidden and display:none，因爲你使用display：none來隱藏你的元素，但檢查可見性：隱藏。

我建議將<li></li>添加到您的標記中，並以與更改標籤可見性相同的方式更改其可見性。以這種方式，不需要包裝/拆封元素。相反，你可以利用2個CSS類：.hide{display:none}.show{display:block;}，並通過.addClass()/.removeClass()添加它們，你已經在部分代碼中使用它們。

我希望這會有所幫助。

來源

2016-10-04 16:41:38 aleksandar

在jQuery驗證中對動態列表進行編號

回答

相關問題