DOM 트래버스 위아래로

Question

div에 라디오 버튼 그룹이 있습니다.이 라디오 버튼 그룹에는 다양한 텍스트 상자가 포함 된 형제 div가 있고, 아래에는 4 개의 레벨이 있습니다. 라디오 버튼 'false'가 선택되어 있으면 해당 그룹의 모든 텍스트 상자를 확인하고 텍스트 상자에 값이 있으면 경고를 팝업합니다.

지금은 텍스트 상자의 값에 관계없이 'false'라디오 버튼에 대해 두 개의 경고를 표시합니다. 왜 '거짓'라디오 버튼에 대한 경고를 두배로 늘리는 지 모르겠지만 실제로는 텍스트 상자를 읽지 않는다고 확신합니다.

find() 메소드가 여러 레벨의 하위를 조사한다고 가정합니다.

EDIT - 5 개의 질문이 있으므로 전체 '질문'수업이 5 번 반복되며 제출 버튼을 클릭하면 각 질문을 확인해야합니다.

<div class="question"> 
    <div class="radio-buttons"> 
     <input type="radio" name="radios" value =" true" />Yes 
     <input type="radio" name="radios" value =" false" />No 
    </div> 
    <div class="label">List out the date, name & category....</div> 
    <div class="answer-container"> 
     <fieldset class="answer-container-sub"> 
      <div class="answer-group"> 
       <div class="question-label">Name</div> 
       <div class="question-answer"> 
        <input type="text" /> 
       </div> 
       <div class="question-label">Name</div> 
       <div class="question-answer"> 
        <input type="text" /> 
       </div> 
      </div> 
      <div class="answer-group"> 
       <div class="question-label">Name</div> 
       <div class="question-answer"> 
        <input type="text" /> 
       </div> 
       <div class="question-label">Name</div> 
       <div class="question-answer"> 
        <input type="text" /> 
       </div> 
      </div> 
     </fieldset> 
    </div> 
</div> 
<input type="submit" id="button" value="Click Me" /> 

jQuery를 ## 편집 해가 위의 HTML을 일치하도록 아래의 코드에서 클래스 이름을 변경하려면 여기

는 마크 업입니다. ##

$("#button").on("click", function() { 
    $('input:radio').each(function() { 
     if ($(this).closest('.radio-buttons').find('input:checked').val() == "False") { 
      if ($(this).siblings('.answer-container').find('input[type=text]').val() != '') { 
       alert("You clicked no but a textbox has a value"); 
      } 
     } 
    }); 
}); 

Answer 1

일부 트래버스 문제는 "true"와 같은 HTML 라디오 값에 선행 공백이 있다는 사실과 관련이 있습니다. 그 공간을 제거해야합니다.

다른 접근 방식을 취했습니다 (jQuery 코드에서 참조하는 마크 업 중 일부가이 게시물에서 누락 되었기 때문에). http://jsfiddle.net/jayblanchard/dGqwZ/을 작성하여 DOM을 탐색하는 것이 얼마나 쉬운 지 보여줍니다.

$('input[name="radios"]').change(function() { 
    var currentValue = $(this).val(); // spaces need to be removed from radio values in HTML 
    if('false' == currentValue) { 
     var answers = $(this).closest('.question').find('.answer-container .question-answer'); 
     $(answers).find('input').each(function() { 
      var answerValue = $(this).val(); 
      if('' != answerValue) { 
       alert(answerValue); 
      } 
     }); 
    } 
});