Nhận giá trị văn bản của li (không có văn bản trong các mục lồng nhau)

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> 

Làm cách nào để nhận giá trị AI AII A B C III?

gì tôi đã cố gắng cho đến nay là như sau:

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

Nhưng nó không cho tôi được yêu cầu kết quả. Khi nó đạt đến "mục-ii" nó đã cho tất cả kết quả.

Tôi muốn từng mục một.

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 
}); 

Phương thức contents() cung cấp cho bạn cả nút văn bản và nút con. Các nút văn bản có số nodeType của 3. Đối với mã kiểu ít chức năng hơn, hãy thử cách này:

$(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 
}); 

Lưu ý rằng vẫn còn nút văn bản trống do đánh dấu.

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); 
}); 

Ref .: $.map(), $.trim(), .contents()

Answer 4

text() chức năng chọn tất cả các nút trong danh sách-itme 'item-ii'. Vì bạn chỉ cần chọn các nút văn bản, hãy sử dụng nút này thay thế:

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