打印所有李的孩子们的文字没有得到亚孩子的每个李

你好我想打印所有李的元素文本没有得到他们的子孩子们的文字，但我无法得到正确的结果：打印所有李的孩子们的文字没有得到亚孩子的每个李

我的HTML：

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>child demo</title> 
    <style> 
    body { 
    font-size: 14px; 
    } 
    </style> 
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
</head> 
<body> 

<ul class="topnav" id="abc"> 
    <li>Item 1</li> 
    <li>Item 2 
    <ul> 
    <li class="topnav1">Nested item 1</li> 
    <li class="topnav1">Nested item 2</li> 
    <li class="topnav1">Nested item 3</li> 
    </ul> 
    </li> 
    <li>Item 3</li> 
</ul> 

<script> 
var li = $("#abc > li"); 
var arr = []; 
for(var i=0;i<li.length;i++){ 
    arr.push($(li[i]).clone().children().remove().end().text()); 
} 
console.log(arr); 

</script> 

</body> 
</html>

脚本运行后，我在编曲越来越怪异的事情：

输出就这样产生：

0:"Item 1" 
1:"Item 2↵ ↵ " 
2:"Item 3"

任何人都可以解释我对这些箭头的含义，我怎样才能得到所有李的文字。我希望我的数组是：

0:"Item 1" 
1:"Item 2" 
2:"Item 3"

当我收到错了吗？

来源

2017-12-03 Akki

该文本覆盖了整个节点，它也可能正在读取子节点li中的换行符。

你可以只使用trim()删除，像

var li = $("#abc > li"); 
var arr = []; 
for(var i=0;i<li.length;i++){ 
    arr.push($(li[i]).clone().children().remove().end().text().trim()); 
} 
console.log(arr);

来源

2017-12-03 06:14:07 Varun

谢谢。这是对的，我只是好奇，因为这种方法需要很多时间。有没有一个快速和更有效的解决方案来做到这一点？ – Akki

我还发现了另一个解决方案：$（“ul.topnav> li”）.each（function（index）{arr.push（$（this）.html（）。split（“\ n”）[0 ]）; }）;这是一个快速还是真正的？ – Akki

你还没有使用'$（this）'？我刚才注意到了！ – Varun

我不知道这是快，但肯定是更清洁

var arr = []; 
$('.topnav > li').filter(function() { 
    var temp = $(this)[0].firstChild.data; 
    arr.push(temp); 
});

来源

2017-12-03 07:34:31 cdoshi

是的，这是更清洁，但我只是想在这里添加解决方案，同时给它的数据给你的节点。所以正确的将是arr.push（temp.trim（））。 – Akki

打印所有李的孩子们的文字没有得到亚孩子的每个李

回答

相关问题