Javascript jQuery：如何从多个元素中获取文本并在多行上打印它们？

我正在学习使用jQuery从其他页面获取数据，我在这样做时遇到的一个问题是，试图找到多个元素，从中获取文本，然后将它们打印到多行中

问题是，我没有找到一种方法将它们打印成多行，而不将每个元素存储在自己的变量中

下面是一个例子，说明了我要做的事情：

外部HTML：

<div class="element element1">
<div class="irrelevant">irrelevant text 1</div>
<div class="anitem1">text 1</div>
<div class="theitem2">text 2</div>
<div class="irrelevant">irrelevant text 2</div>
<div class="item3">text 3</div>
<div class="theitem4">text 4</div>
<div class="irrelevant">irrelevant text 3</div>
</div>

<div class="app"></div>

文本在同一行上，但我要找的是在多行上打印它

预期产出：

text 1
text 2
text 3
text 4

您可以使用children函数，使用text获取文本并追加新行\n

设vars=； $'.element'.children.eachi，v=>{ vars+=$v.text+'\n' } console.logvars 文本1 文本2 文本3 文本4

---

您可以再次遍历中的对象。查找结果：

处理文本节点从来不是jQuery的优点之一。innerText属性提取选定元素及其所有子元素的文本以及包含换行符的文本。它是一个普通的JavaScript属性，因此如果在jQuery对象上使用它，则需要将其解引用到DOM对象。取消引用有两种方法：

或

只要一句话。只要选择一个祖先元素，让她撕开

解决方案 过滤掉不相关的标签： 克隆并将其附加到.app 用.innerText覆盖.app中的所有内容。 结果就是文本和节点。无重复—它是以编程方式直接复制、粘贴和格式化的

演示 红色框中的文本即app为结果

.app{ 轮廓：1px红色虚线 } 无关文本1 文本1 文本2 无关文本2 文本3 文本4 无关文本3 $'.element.find'：parent'.not'.unrelated'.clonetrue，true.appendTo'.app'； $'.app'[0]。innerText=$'.app'[0]。innerText；

---

我很容易地解决了这个问题，为我想要包含的元素创建了一个数组，然后映射到每个元素，并在末尾添加了一个数组

代码如下：

// Array for the elements I want to select
var classes = ['.anitem1', '.theitem2', '.item3', '.theitem4'];

// Declaring the variable which will include the elements of the list       
var lists;

/* Mapping over each element in classes array, 
finding it and getting a text from it + adding br tag to it*/

classes.map(function(x) {lists += $(obj).find(x).text() + '</br>'})

// Appending lists to app
$('.app').append('<ol><li>' + lists + '</li></ol>');

我选择zer00ne的答案作为最佳解决方案，因为它只在一行中解决了问题

---

但是对于我的代码，我使用上面的代码是因为它解决了我无法在这里共享所有代码的其他问题，如果我这样做，我将编写一个很长的代码。其中之一是，我有许多元素包含具有相同类的项。使用前一种方法会将所有项目推送到第一个有序列表中，而我想要的是将第一个元素的项目推送到第一个，将第二个元素的项目推送到第二个，依此类推。

您是否尝试过追加文本并添加换行符，或者将文本包含在标记中？在任何需要换行的位置使用\n如果您知道通过其类名获取谁的文本，则下面的代码应该可以使用。$'。app'.append$'.element>.anitem1'.text，$'.element>.anitem2'.text这将是重复的。也可以选择元素，然后将其存储在变量中。然后我调用每个变量来附加元素。我正试图找到一种方法，不再重复相同的代码。不过还是要谢谢你。@Dexter一行，一个属性见我的谢谢。在现实世界中，目标div周围也有不相关的div和文本。出于这个原因，我编辑了这个问题。这就是我使用find的原因。在这种情况下，您将如何执行此操作？未捕获的TypeError:$…查找…文本…每个都不是函数。无论如何，文本的输出（带有find）返回一个字符串。Looping over it=在字符串上循环。请在.find之后省略.text作为上面的代码@德克斯特，你知道吗？这是最好的答案。它解决了整个问题。谢谢，伙计+5它是有效的，我认为这是我所要求的最好的答案+5.

var newText;
var getText = $(obj).find('.anitem1, .theitem2, item3, .theitem4').each(function(){
  newText=$(this).text() + '<br>'; // or \n
  $('.app').append(newText);
});

$(selector)[0]

$(selector).get(0)

$('.app')[0].innerText = $('.app')[0].innerText;

$('.element').find(':parent').not('.irrelevant')...

.....clone(true, true).appendTo('.app');

$('.app')[0].innerText = $('.app')[0].innerText;

// Array for the elements I want to select
var classes = ['.anitem1', '.theitem2', '.item3', '.theitem4'];

// Declaring the variable which will include the elements of the list       
var lists;

/* Mapping over each element in classes array, 
finding it and getting a text from it + adding br tag to it*/

classes.map(function(x) {lists += $(obj).find(x).text() + '</br>'})

// Appending lists to app
$('.app').append('<ol><li>' + lists + '</li></ol>');