-1
votes

Ajouter la classe au parent parent qui correspond au texte de l'étiquette

Je voudrais ajouter un class code> à chaque parent div code> et faire correspondre cette classe correspond au contenu de l'étiquette code> code> dans la DIV avec un Union d'union ajoutée entre chaque mot.

Dans l'exemple ci-dessous, la première div aurait la classe enfant-1-nom code>, le deuxième enfant-1-nom-nom code>, Le troisième enfant-1-age code>. Toute direction serait grandement appréciée! P>

Notez que le code HTML est généré automatiquement. P>

p>



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div>
  <span class="req"></span>
  <span>
    <label class="wrapable">child 1 name</label>
    <span class="net"><input type="text"></span>
  </span>
</div>
<div>
  <span class="req"></span>
  <span>
    <label class="wrapable">child 1 last name</label>
    <span class="net"><input type="text"></span>
  </span>
</div>
<div>
  <span class="req"></span>
  <span>
    <label class="wrapable">child 1 age</label>
    <span class="net"><input type="text"></span>
  </span>
</div>

javascript jquery

1 commentaires

Qu'est-ce que tu as essayé jusque-là?

6 Réponses :

1
votes

Vous obtenez d'abord tous les éléments code> code>. Après avoir extraire l'élément parent div code> et ajoutez le texte code> de l'étiquette code> code> comme classname code> de ce code>.

p>



<div>
  <span class="req"></span>
  <span>
    <label class="wrapable">child 1 name</label>
    <span class="net"><input type="text"></span>
  </span>
</div>
<div>
  <span class="req"></span>
  <span>
    <label class="wrapable">child 1 last name</label>
    <span class="net"><input type="text"></span>
  </span>
</div>
<div>
  <span class="req"></span>
  <span>
    <label class="wrapable">child 1 age</label>
    <span class="net"><input type="text"></span>
  </span>
</div>

0 commentaires

1
votes

Le moyen le plus simple d'atteindre cela serait de boucler à travers tous les éléments .wrapable code>, récupérez leur ancêtre div code> ancêtre, puis définissez la classe sur celle du texte de L'étiquette >, avec un de base remplacer () code> opération sur le blanchiment, quelque chose comme ceci:

p>



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div>
  <span class="req"></span>
  <span>
    <label class="wrapable">child 1 name</label>
    <span class="net"><input type="text"></span>
  </span>
</div>
<div>
  <span class="req"></span>
  <span>
    <label class="wrapable">child 1 last name</label>
    <span class="net"><input type="text"></span>
  </span>
</div>
<div>
  <span class="req"></span>
  <span>
    <label class="wrapable">child 1 age</label>
    <span class="net"><input type="text"></span>
  </span>
</div>

0 commentaires

1
votes

Vous pouvez récupérer chaque .wrapable code> classe et ajouter une classe à son le plus proche code> 'div'. Utilisation de Regex Remplacer les espaces dans des traits d'union.

p>



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div>
  <span class="req"></span>
  <span>
    <label class="wrapable">child 1 name</label>
    <span class="net"><input type="text"></span>
  </span>
</div>
<div>
  <span class="req"></span>
  <span>
    <label class="wrapable">child 1 last name</label>
    <span class="net"><input type="text"></span>
  </span>
</div>
<div>
  <span class="req"></span>
  <span>
    <label class="wrapable">child 1 age</label>
    <span class="net"><input type="text"></span>
  </span>
</div>

0 commentaires

0
votes

Voici un moyen assez simple de le faire: il suffit de trouver le texte, de retirer les espaces à l'extérieur, de convertir en minuscule et de remplacer tout autre blancheur avec des tirets.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div>
  <span class="req"></span>
  <span>
    <label class="wrapable">child 1 name</label>
    <span class="net"><input type="text"></span>
  </span>
</div>
<div>
  <span class="req"></span>
  <span>
    <label class="wrapable">child 1 last name</label>
    <span class="net"><input type="text"></span>
  </span>
</div>
<div>
  <span class="req"></span>
  <span>
    <label class="wrapable">child 1 age</label>
    <span class="net"><input type="text"></span>
  </span>
</div>

0 commentaires

0
votes

Vérifiez le code, espérons que cela vous aidera.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div>
  <span class="req"></span>
  <span>
    <label class="wrapable">child 1 name</label>
    <span class="net"><input type="text"/></span>
  </span>
</div>
<div>
  <span class="req"></span>
  <span>
    <label class="wrapable">child 1 last name</label>
    <span class="net"><input type="text"/></span>
  </span>
</div>
<div>
  <span class="req"></span>
  <span>
    <label class="wrapable">child 1 age</label>
    <span class="net"><input type="text"/></span>
  </span>
</div>

<script>
  $(document).ready(function() {
    $(".wrapable").each(function() {
      //   alert($(this).text());
      var data = $(this).text();
      $(this)
        .closest("div")
        .addClass(
          $(this)
            .text()
            .trim()
            .replace(/\s+/g, "-")
        );
    });
  });
</script>

0 commentaires

0
votes

Ceci pourrait être une solution javascript simple sans utiliser jQuery:

Regardez mes commentaires pour comprendre ce qui se passe. P>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div>
  <span class="req"></span>
  <span>
    <label class="wrapable">child 1 name</label>
    <span class="net"><input type="text"></span>
  </span>
</div>
<div>
  <span class="req"></span>
  <span>
    <label class="wrapable">child 1 last name</label>
    <span class="net"><input type="text"></span>
  </span>
</div>
<div>
  <span class="req"></span>
  <span>
    <label class="wrapable">child 1 age</label>
    <span class="net"><input type="text"></span>
  </span>
</div>

0 commentaires