`.innerText`

Question

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

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

下面是一个示例，它阐明了我要执行的操作：

外部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>

内部HTML：

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

jQuery：

theUrl = 'https://api.allorigins.ml/get?url=' + encodeURIComponent('
https://www.thisisjustanexampleurl.com/something.html');

$.ajax({
url: theUrl,
type: get,
dataType: "",
success: function(data) {
$(data.contents).find('.element').each(function(i, obj){
var getText = $(obj).find('.anitem1, .theitem2, item3, .theitem4').text();

$('.app').append(getText) // output: text 1text 2text 3text 4

})
}
})

文本在同一行上，但我要查找的是将其打印在多行上。

预期输出：

text 1
text 2
text 3
text 4

Answer 1

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

let vars = '';
$('.element').children().each((i, v) => {
  vars += $(v).text() + '\n'

})

console.log(vars)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="element element1">
  <div class="anitem1">text 1</div>
  <div class="theitem2">text 2</div>
  <div class="item3">text 3</div>
  <div class="theitem4">text 4</div>
</div>

Answer 2

您可以再次遍历.find()结果中的对象：

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

Answer 3

`.innerText`

处理文本节点从来都不是jQuery的强项之一。 .innerText属性会提取所选元素的文本及其所有后代的文本-包括 换行符 。这是一个普通的JavaScript属性，因此，如果在jQuery对象上使用它，则需要将其取消引用到DOM对象。有两种取消引用的方式：

$(selector)[0]

或

$(selector).get(0)

只需要一行。只需选择一个祖先元素并让她撕裂即可。

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

解决方案

过滤掉.irrelevant标签：

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

克隆并将其附加到.app

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

用.app覆盖.innerText中的所有内容。

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

结果只是文本节点和<br>。不能重复，它是通过编程直接复制，粘贴和格式化的。

演示

红色轮廓框中的文本（即.app）就是结果。

.app {
  outline: 1px dashed red
}

<!DOCTYPE html>
<html>
<head></head>
<body>
  <header class='app'></header>
  <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>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
    $('.element').find(':parent').not('.irrelevant').clone(true, true).appendTo('.app');
    $('.app')[0].innerText = $('.app')[0].innerText;
  </script>
</body>

</html>

Answer 4

我通过为要包括的元素创建一个数组来解决此问题，然后将其映射到每个元素并在末尾添加了</br>。

代码如下：

// 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的答案作为最佳解决方案，因为它只能在一行中解决问题。

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

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

4 个答案:

`.innerText`

解决方案

演示