jQuery: как получить текст из нескольких элементов и напечатать их в несколько строк? - PullRequest
Новая
       2

jQuery: как получить текст из нескольких элементов и напечатать их в несколько строк?

0 голосов
/ 27 января 2019

Я учусь получать данные с других страниц, используя 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>

Внутренний 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

Ответы [ 4 ]

0 голосов
/ 27 января 2019

Я легко решил эту проблему, создав массив для элементов, которые я хочу включить, а затем сопоставил каждый элемент и добавил </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> и так далее.

0 голосов
/ 27 января 2019

Вы можете снова пройтись по объектам в .find() результате: 

var newText;
var getText = $(obj).find('.anitem1, .theitem2, item3, .theitem4').each(function(){
  newText=$(this).text() + '<br>'; // or \n
  $('.app').append(newText);
});
0 голосов
/ 27 января 2019

.innerText

Обработка текстовых узлов никогда не была сильной стороной jQuery.Свойство .innerText извлекает текст выбранных элементов, а также текст всех его потомков - включая разрывы строк .Это простое свойство JavaScript, поэтому, если вы используете его в объекте jQuery, вам нужно разыменовать его в объект DOM.Существует два способа разыменования: 

$(selector)[0]

или 

$(selector).get(0)

Все, что требуется, - это одна строка.Просто выберите элемент предка и дайте ей разорваться. 

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

Решение

  1. Отфильтруйте теги .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>
0 голосов
/ 27 января 2019

Вы можете использовать функцию 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...