0
votes

jQuery transforme la chaîne en plusieurs instances

J'essaie de séparer le .string en éléments span pour chaque .item mais je ne trouve pas la bonne façon de le faire.

J'ai essayé la fonction ci-dessous mais je n'arrive pas à la faire fonctionner pour qu'elle ne fonctionne que sur le .item le plus proche .

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item">
  <div class="string">Test1 Test2 Test3</div>
</div>
<div class="item">
  <div class="string">TestA TestB TestC</div>
</div>

.string span {
  border: 1px solid
}

$(".item").each(function() {
  var arr = $(".string").text().split(" ");
  var html = "";
  for (i = 0; i < arr.length; ++i) {
    html += "<span>" + arr[i] + "</span>";
  }
  $(".this").closest(".string").html(html);
});

$(".string").html(
  $(".string")
    .html()
    .split(" ")
    .map(function(el) {
      return "<span>" + el + "</span>";
    })
);

javascript jquery

1 commentaires

voulez-vous remplacer le div par 3 span ou insérer le span en tant qu'enfants?

3 Réponses :

1
votes

Vous devez d'abord .find le .string à l'intérieur du .item en cours d'itération avec

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item">
  <div class="string">Test1 Test2 Test3</div>
</div>
<div class="item">
  <div class="string">TestA TestB TestC</div>
</div>

sinon votre $ (". string") ne correspondra qu'à la première .string du document. Ensuite, pour définir le .string enfant du .item en cours de lecture, utilisez

.string span {
  border: 1px solid
}

( recherche ancêtres , pas enfants)

Veillez également à ne pas créer implicitement de variable globale avec

$(".string").each(function() {
  $(this).html(
    $(this).html().replace(/(\S+)\s*/g, '<span>$1</span>')
  );
});

(déclarez toujours les variables que vous allez utiliser avec const , let ou var)

p >

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item">
  <div class="string">Test1 Test2 Test3</div>
</div>
<div class="item">
  <div class="string">TestA TestB TestC</div>
</div>

.string span {
  border: 1px solid
}

$(".string").each(function() {
  var arr = $(this).text().split(" ");
  var html = "";
  for (let i = 0; i < arr.length; i++) {
    html += "<span>" + arr[i] + "</span>";
  }
  $(this).html(html);
});

Ou, si possible, vous pouvez parcourir directement les .string s:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item">
  <div class="string">Test1 Test2 Test3</div>
</div>
<div class="item">
  <div class="string">TestA TestB TestC</div>
</div>

.string span {
  border: 1px solid
}

$(".item").each(function() {
  var arr = $(this).find(".string").text().split(" ");
  var html = "";
  for (let i = 0; i < arr.length; ++i) {
    html += "<span>" + arr[i] + "</span>";
  }
  $(this).find(".string").html(html);
});

Une autre option serait d'utiliser une expression régulière remplacer - trouver les caractères non espace ( (\ S +) ), et les remplacer par ceux qui ne correspondent pas -espacer les caractères entourés d'un span : $1:

for (i = 0; i < arr.length; ++i) {

$(this).find(".string").html(html);

var arr = $(this).find(".string").text().split(" ");

0 commentaires

0
votes

Bouclez sur tous les éléments .string et créez un intervalle pour chaque texte divisé par des espaces. Remplacez ensuite le div actuel par les intervalles créés:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item">
  <div class="string">Test1 Test2 Test3</div>
</div>
<div class="item">
  <div class="string">TestA TestB TestC</div>
</div>

$.each($('.string'), (ind, val) => {
  const spans = $(val).text().split(' ').map(text => $(`<span>${text}</span>`));
  $(val).replaceWith(spans);
});

0 commentaires

1
votes

Vous avez une petite erreur dans votre code. remplacez var arr = $ (". string"). text (). split (""); par var arr = $ (this) .find (">. string"). text (). split (""); pour trouver le .string à l'intérieur du .item qui est dans l'itération actuelle de la boucle.

Et changez $ (". this"). plus proche (". string"). html (html); à $ (this) .find (">. string"). html (html) ; pour remplacer le html de .string dans le .item qui est dans l'itération actuelle de la boucle.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item">
  <div class="string">Test1 Test2 Test3</div>
</div>
<div class="item">
  <div class="string">TestA TestB TestC</div>
</div>

.string span {
  border: 1px solid
}

$(".item").each(function() {
  var arr = $(this).find(">.string").text().split(" ");
  var html = "";
  for (i = 0; i < arr.length; ++i) {
    html += "<span>" + arr[i] + "</span>";
  }
  $(this).find(">.string").html(html);
});

0 commentaires