Question

您好我正在尝试打印所有li的元素文本，但没有得到他们的子孩子的文字，但我无法得到正确的结果：

我的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>

脚本运行后，我在arr中得到了奇怪的东西：

输出如下：

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

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

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

我哪里出错？

Answer 1

该文本涵盖了整个节点，它也可能正在读取子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);

Answer 2

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

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

打印所有li的孩子的文本，而不是每个li的子孩子

2 个答案: