li의 텍스트 값 가져 오기 (중첩 된 항목에 텍스트 없음)

Question

<ul> 
    <li class="item-i">AI</li> 
    <li class="item-ii">AII 
    <ul class="level-2"> 
     <li class="item-a">A</li> 
     <li class="item-b">B</li> 
     <li class="item-c">C</li> 
    </ul> 
    </li> 
    <li class="item-iii">III</li> 
</ul> 

값을 어떻게 얻을 수 있습니까? AI AII A B C III?

$(document).ready(function() { 
    $('li').each(function(index) { 
    alert($(this).text()); 
    }); 
}); 

을하지만 그것은 나를 결과를 요구했다하지 않습니다 지금까지 시도 무엇

다음있다. 그것이 "item-ii"에 도달했을 때 모든 결과를 주었다.

항목을 하나씩 원합니다.

Answer 1

$(function(){ 
    var text = $('li').map(function(){ 
    return $(this).contents().map(function(){ 
     return this.nodeType==3 ? this.nodeValue : ""; 
    }).get().join(''); 
    }).get().join(' '); 
    console.log(text); 
    // AI AII 
    // 
    //  A B C III 
}); 

contents() 메서드는 텍스트 노드와 자식 노드를 모두 제공합니다. 텍스트 노드는 nodeType이 3입니다. 덜 기능적인 스타일 코드의 경우 다음을 시도하십시오.

$(function(){ 
    $('li').each(function(){ 
    $(this).contents().each(function(){ 
     if (this.nodeType==3){ 
     console.log(this.nodeValue.replace(/^\s+|\s+$/g,'')); 
     } 
    }); 
    }); 
    // AI 
    // AII 
    // 
    // A 
    // B 
    // C 
    // III 
}); 

마크 업으로 인해 텍스트 노드가 비어 있습니다.

Answer 2

<form> 
    <ul>  
    <li class="item-i">AI</li> 
    <li class="item-ii">AII</li> 
    <ul class="level-2"> 
     <li class="item-a">A</li> 
     <li class="item-b">B</li> 
     <li class="item-c">C</li> 
     </ul> 
     <li class="item-iii">III</li> 
    </ul> 
</form> 

Answer 3

$(function() { 
    var content = $.map($('ul li').contents(), function(elem, i) { 
    if(elem.nodeType === 3 && $.trim(elem.nodeValue).length) 
     return $.trim(elem.nodeValue); 
    }); 

    alert(content); 
}); 

심판 : $.map(), $.trim(), .contents()

Answer 4

텍스트() 함수는리스트 itme '항목-II'내의 모든 노드를 선택한다. 텍스트 노드 만 선택해야하므로 대신 다음을 사용하십시오.

$(document).ready(function(){ 
      $('li').each(function(index) { 
    alert($(this).contents().filter(function(){ return this.nodeType==3}).text()); 
    }); 
     });