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]

기본적으로 오류가 없으면 페이지에 표시되지 않으며 숫자 목록 순서로 표시되지 않습니다.

현재 페이지의 입력란의 유효성을 검사하면 숫자가 여전히 옆에 표시됩니다. 번호를 삭제하고 숫자 순서를 유지하기를 원합니다. 이것이 가능한가?

바이올린 : https://jsfiddle.net/DTcHh/25848/

Answer 1

귀하의 문제가이 유래 : 요소를 풀지 못하고있다

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

. 아이템의 순서를 유지하기 때문에 이것은 아마도 더 나은 방법 일 것입니다.

그러면 양식 필드의 유효성을 검사 한 후에 전체 요소를 숨기면 쉽게 문제를 해결할 수 있습니다.

이제 요소가 풀리지 않는 이유는 display : none을 사용하여 요소를 숨기고 표시 여부를 확인하기 때문에 the difference between visibility:hidden and display:none을 읽어 보시기 바랍니다.

마크 업에 <li></li>을 추가하고 라벨의 가시성을 변경하는 것과 동일한 방식으로 마크 업을 변경하는 것이 좋습니다. 이 방법으로 요소를 랩핑하거나 래핑 할 필요가 없습니다. 대신 단지 2 개의 CSS 클래스 (.hide{display:none}.show{display:block;})를 활용하고 이미 코드 일부에서 사용하고있는 .addClass()/.removeClass()을 통해 추가 할 수 있습니다.

이 정보가 도움이되기를 바랍니다.