이 jQuery 선택기가 요소를 반환하지 않는 이유는 무엇입니까?

Question

모든 하위 요소를 선택하고 특정 특성을 가진 요소를 필터링하려고합니다. 요소 중 하나는 데이터 필수 속성을 포함하는 contenteditible div입니다 (아래 HTML 참조).

$("#mail-container").filter('[required], [data-required]').length 

을하지만 다음을 실행할 때, 0이 반환됩니다 : 나는 다음 선택기를 사용하면 1을 반환

form.contents().filter('[data-required]').length; 

주, 다음 반환 9 :

form.contents().length; 

을 EDIT

다음 함수를 다음 : 내가 놓친 게 무엇

$("#send-email").on('mouseup', function (e) { 
    if (!validateRequiredFields($("#form-email-preview"))) return false; 
    var data = {}; 
    data.action = "manuscript-request-email"; 
    data["writers-id"] = $("#writer-id").val(); 
    data["account-id"] = localStorage.getItem("account-id"); 
    data.subject = $("#subject").val(); 
    data.body = $("#mail-container").html(); 
    ajax('post', 'php/writers.php', data, sentEmail); 
    function sentEmail(result) { 
     console.log("email-res=" + result); 
     return2table(); 
    } 
}); 

function validateRequiredFields(form) { 
    var $reqFlds = form.contents().filter('[required], [data-required]'); 
    var ret = true; 
    debugger 
    $reqFlds.each(function() { 
     var $this = $(this); 
     var result = ($this.eq("input, select, textarea")) ? $this.val() : $this.text(); 
     if (!$.trim(result)) { 
      $this.prop('data-toggle=popover', true); 
      $this.show(); 
      $this.popover("destroy").popover({ content: "Please fill out this field.", placement: 'bottom' }); 
      $this.popover('show'); 
      $this.focus(); 
      ret = false; 
      return false; 
     } 
    }); 
    return ret; 
} 

HTML

<form id="form-email-preview" style="margin-top: 24px;"> 
    <div id="main-container" class="hidden" style="border: 1px solid black; padding: 6px; border-radius: 8px;"> 
     <span><b>Subject:</b></span><input id="subject" type="text" value="Manuscript Request" style="display: inline-block" /> 
     <p><b>Email:</b></p> 
     <div id="mail-container" contenteditable data-toggle="popover" data-required data-placement="top" data-title ="Required field" style="display: inline-block"></div><br/> 
     <p id="buttons" class="hidden"> 
      <input type='button' id='send-email' class='btn btn-custom-success' value='Send Email' /><span> </span> 
      <button id='cancel-email' class = 'btn btn-danger'>Cancel</button> 
     </p> 
    </div> 
    <div id="current-row" class="hidden"></div> 
    <input id="current-checkbox" type="checkbox" class="hidden" /> 
    <input id="current-tr" type="number" class="hidden" /> 
</form> 

?

Answer 1

단순히 일치하는 요소가 없습니까? 이러한 맥락에서

, 당신은

validateRequiredFields($("#form-email-preview")); 

function validateRequiredFields(form) { 

    var $reqFlds = form.contents().filter('[required], [data-required]'); 

    .... 

form.contents()을하고있는 것은 그가 textnodes을 포함하여, 당신에게 양식의 아홉 자녀를 얻을 수

요소 당신이 그들 중 아무도 없습니다, 아홉

<form id="form-email-preview" style="margin-top: 24px;"> 
    <!-- text node here -->           <!-- 1 --> 
    <div id="main-container" ...></div>        <!-- 2 --> 
    <!-- text node here -->           <!-- 3 --> 
    <div id="current-row" class="hidden"></div>      <!-- 4 --> 
    <!-- text node here -->           <!-- 5 --> 
    <input id="current-checkbox" type="checkbox" class="hidden" /> <!-- 6 --> 
    <!-- text node here -->           <!-- 7 --> 
    <input id="current-tr" type="number" class="hidden" />   <!-- 8 --> 
    <!-- text node here -->           <!-- 9 --> 
</form> 

찾고 싶다면 여기 contents()은 무엇입니까

각 요소의 자식을 가져옵니다. 일치하는 요소 집합에 nt, 텍스트 및 설명 노드가 포함 된 filter()이 만

는 셀렉터에 일치하거나 그 일치 요소의 집합을 감소, 그 아홉의 아이들을 필터링하지 않는

는 그런 다음, 만 구 그 아홉 개 요소를 필터링하고, 함수의 테스트를 통과합니다.

당신은 찾고있는 속성을 가진 요소가없고, 그 세트를 필터링하면 결국 ...당신이 원하는 어떤 것도

은

var $reqFlds = form.find('[required], [data-required]'); 

이 (!) 참고로, 당신이 사용하고있는 방법에 대한 설명서를 읽고, 그들이 수행 예를 들어 이러한 잘못된 무엇인지 명확해야했다

$this.eq("input, select, textarea") // eq() accepts a number only 

$this.prop('data-toggle=popover', true); // accepts a property, 
             // not an entire attribute, with the value ? 

Answer 2

컨텍스트가없는 예제 코드에 따르면 form은 jQuery 객체 대신 DOM 노드를 나타냅니다.

jQuery 메서드로 포장하여 jQuery 개체로 만들면 정상적으로 작동합니다.

var $reqFlds = $(form).contents().filter('[required], [data-required]'); 

Answer 3

이것이 문제의 원인인지는 모르겠지만 첫 번째 예에서는 $ ("mail-container") 요소를 사용하고 있습니다. $ ("# form-email-preview") 요소를 참조하는 코드 (! validateRequiredFields ($ ("# form-email-preview")))에서. 도움이 되었기를 바랍니다