메시지를 여러 번 표시

Question

다음 코드가 있습니다.

<fieldset id="test"> 
    <label><b>(2)</b> Open Sub-tasks</label> 
    <div class="table-holder"> 
     <table class="table"> 
      <thead> 
      <tr> 
       <th style="width:40%;">Location/Problem</th> 
       <th style="width:30%;">Assignment</th> 
       <th class="align-right" style="width:30%;">Due Date</th> 
      </tr> 
      </thead> 
      <tbody id="tbody"> 
      <tr> 
       <td>Bathroom, Plumbing</td> 
       <td>Johnny Fixalot</td> 
       <td class="align-right">03/14/2017</td> 
      </tr> 
      </tbody> 
     </table> 
     <ul class="multi-list tabs"> 
      <li class="width-50 sub_task_complete"> 
       <a class="first">Mark Complete</a></li> 
      <li class="width-50 sub_task_complete"> 
       <a class="last even">Delete</a></li> 
     </ul> 
    </div> 
    <br> 
    <div class="table-holder"> 
     <table class="table"> 
      <thead> 
      <tr> 
       <th style="width:40%;">Location/Problem</th> 
       <th style="width:30%;">Assignment</th> 
       <th class="align-right" style="width:30%;">Due Date</th> 
      </tr> 
      </thead> 
      <tbody id="tbody"> 
      <tr> 
       <td>Bathroom, Plumbing</td> 
       <td>Johnny Fixalot</td> 
       <td class="align-right">03/14/2017</td> 
      </tr> 
      </tbody> 
     </table> 
     <ul class="multi-list tabs"> 
      <li class="width-50 sub_task_complete"> 
       <a class="first">Mark Complete</a></li> 
      <li class="width-50 sub_task_complete"> 
       <a class="last even">Delete</a></li> 
     </ul> 
    </div> 
    <br> 
    <hr> 
</fieldset> 

이 코드에 따르면,이 코드는 완료 및 삭제 옵션과 함께 각각 2 개의 작업을 표시합니다. 옵션 "li"이 선택된 클래스를 가져 오는 옵션이 선택되면. 선택한 옵션이 유효한지 여부를 확인하고 오류 메시지를 표시하려고합니다. 그것의 메시지를 4/5 시간을 표시

$('ul.multi-list').each(function(){ 
if($('li.sub_task_complete.selected').length == 0){ 
    $('fieldset#test').addClass('error'); 
    $('fieldset#test .table-holder').after('<span class="oops">Please select an option for completing or deleting sub task.</span>'); 
} 
}); 

내 시험 코드는 인걸요. 각 테이블 홀더 후에 메시지를 표시하려면 선택하지 않으면 한 번만 표시합니다..

참고 : ul.multi-list 클래스가있는 여러 개의 필드 집합이있을 수 있으므로 li의 sub_task_complete 클래스는 구분 요소입니다.

Answer 1

아, 내 첫 번째 답변에 대한 의견을 듣고 나니 지금하고있는 일을 얻습니다. 이 경우 .closest를 사용하려고합니다. 확실히 이것은 당신이 겪은 일을합니다.

// Iterate through the lists individually 
$('ul.multi-list').each(function(){ 
    // Set the errors variable for this list to 0 
    var errors= 0; 
    // Iterate through the li's in this list 
    // Increment errors if any of the tasks are missing .selected 
    $(this).find('li').each(function(){ 
    if(!$(this).hasClass("selected")){ 
    errors++; 
     } 
    }) 

    // Check if this list has 2 errors meaning neither 
    // li has .selected and add the error class and message to 
    //this list only 
    if(errors ==2) { 
    $(this).closest('.table-holder').addClass('error'); 
    $(this).closest('.table-holder').after('<span class="oops">Please select an option for completing or deleting sub task.</span>'); 
    } 
}); 

바이올린 : https://jsfiddle.net/4qprwk3y/ 대신에 당신의 목표를 달성하기 위해이 같은 붙박이 jQuery를 기능을 사용할 수있는 모든 리 옵션을 반복 처리의

Answer 2

: 최대한 빨리 선택으로

if($('li').filter('.selected').length == 0) 
{ 
e.preventDefault(); 
alert('please select atleast one option'); 
} 

Here you can see an example