요소를 통해 필터링하고 텍스트가있는 요소 만 선택하십시오.

Question

<div id="page-content"> 
    <ul> 
    <li>Text</li> 
    <li>Text 2 </li> 
    </ul 
    <div class="heading"> 
    <h2>Heading</h2> 
    </div> 
</div> 

위의 HTML 코드를 예로 들었습니다. 각 요소를 필터링하고 텍스트가있는 요소에만 클래스를 추가하려고합니다. 나는 다음과 같은 몇 가지 jQuery를 가지고 : 그것은 텍스트를 가지고 클래스 '야호'를 추가하는 경우

$(document).ready(function(){ 
    $('#page-content').find('*').each(function(){ 
    if ($(this).text().trim().length){ 
     $(this).addClass('yay'); 
    } 
    }); 
}); 

코드는 각 페이지의 콘텐츠 요소 항목 및 검사를 찾을 수 있습니다. 이것은 작동하지만 자식이 텍스트를 가지고있는 경우 부모 요소에 클래스를 제공합니다. 예. <li>에는 텍스트가 있기 때문에 <ul> 클래스를 제공합니다.

내가 사용하고있는 코드에 문제가 있습니까? 텍스트가있는 요소에만 클래스를 적용하려면 완전히 다른 스크립트를 사용해야합니까?

참고 html로는 그래서는 <ol> 대신 <ul>, 또는 # 페이지 콘텐츠 안에 포함 된 <a> 태그로 끝낼 수 있습니다 생성됩니다.

Answer 1

요소를 자식이 있는지 확인하기 위해 코드를 수정할 수 있으며이 노드가 텍스트 노드 인 경우에만 클래스를 추가 할 수 있습니다. 그러나 HTML이 잘 형성되지 않으면 문제가 발생할 수 있습니다.

$(document).ready(function() { 
     $('#page-content').find('*').each(function() { 
      if ($(this).children().length == 0 && $(this).text().trim().length) { 
       $(this).addClass('yay'); 
      } 
     }); 
    });