J'apprends à obtenir des données à partir d'autres pages à l'aide de jQuery et l'un des problèmes que j'ai rencontrés en le faisant est d'essayer de trouver plusieurs éléments, d'obtenir leur texte puis de les imprimer sur plusieurs lignes

Le problème est que je n'ai pas trouvé de moyen de les imprimer sur plusieurs lignes sans stocker chaque élément dans sa propre variable.

Voici un exemple qui clarifie ce que j'essaie de faire:

HTML externe:

<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 interne:

<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

})
}
})

Le texte est sur la même ligne, mais ce que je recherche, c'est l'imprimer sur plusieurs lignes.

Production attendue:

text 1
text 2
text 3
text 4
1
Dexter 27 janv. 2019 à 08:38

3 réponses

Meilleure réponse

Vous pouvez à nouveau parcourir les objets dans le résultat .find():

var newText;
var getText = $(obj).find('.anitem1, .theitem2, item3, .theitem4').each(function(){
  newText=$(this).text() + '<br>'; // or \n
  $('.app').append(newText);
});
1
Ali Sheikhpour 27 janv. 2019 à 05:58

Vous pouvez utiliser la fonction children et obtenir du texte en utilisant text et ajouter une nouvelle ligne \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>
1
brk 27 janv. 2019 à 05:43

J'ai résolu cela facilement en créant un tableau pour les éléments que je veux inclure, puis j'ai mappé sur chaque élément et ajouté un </br> à la fin.

Voici le code:

// 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>');

J'ai choisi la réponse de zer00ne comme la meilleure solution car elle résout le problème en une seule ligne.

Mais pour mon code, j'utilise ce qui précède car cela résout d'autres problèmes que je ne peux pas tous partager ici et si je le fais, je finirai par écrire un code très long. L'un d'eux est que j'ai de nombreux éléments contenant des éléments de la même classe. Utiliser l'ancienne approche poussera tous les éléments vers la première liste ordonnée, tandis que ce que je veux, c'est pousser les éléments du premier élément vers le premier <ol>, et ceux du second vers le second <ol> etc.

0
Dexter 27 janv. 2019 à 10:52