Question

我正在尝试使用jquery学习DOM报废。我有这样的结构

<p>
            A. liver.
            <br> B. diaphragm.
            <br> C. esophagus.
            <br> D. pancreas.
</p>

如何迭代此 P标记并在数组中获取 TEXT NODES ，例如[A-Text，BText，CText，DText]，我不知道想要 <br> tag 。请帮助我弄清楚，如何在P标记子项中循环并隔离文本节点。

由于

Answer 1

要使用jQuery执行此操作，您可以使用var textNodeArray = $('p').contents().filter(function() { return this.nodeType == Node.TEXT_NODE && this.textContent.trim(); }).get(); /* for demo purposes */ textNodeArray.forEach(function(node) { console.log(node.textContent.trim()); });的组合来获取父级中的所有节点，然后使用<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p> A. liver. <br>B. diaphragm. <br>C. esophagus. <br>D. pancreas. </p>来获取textNodes。试试这个：

＆＃13;

contents

＆＃13;

Answer 2

您可以使用filter函数获取var arr = []; var getTextNodesContent = function(el) { return $(el).children().addBack().contents().filter(function() { var isTextNode = this.nodeType == 3; if (isTextNode) { arr.push($(this).text().trim()) } return this.nodeType == 3; }); }; getTextNodesContent($('p')) console.log(arr);元素的子元素（包括文本和注释节点），然后使用Intent.EXTRA_SUBJECT将集合缩减为仅包含文本类型的节点。 / p>

Intent.EXTRA_TEXT

Answer 3

使用.contents()，.filter()和.map()函数的解决方案：

var textNodes = $('p').contents().filter(function(){
    return this.nodeType === 3;
}).map(function(i, n){
    return n.nodeValue.trim();
}).get();

console.log(textNodes);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
  A. liver.
  <br> B. diaphragm.
  <br> C. esophagus.
  <br> D. pancreas.
</p>

迭代父元素并获取文本节点

3 个答案: