CODEWITHSUNDEEP
jqueryhtml
Luca Belletti
Luca Belletti

Reputation: 103

Add a label with the input placeholder

I would like to add the label with the content of the placeholder with jQuery. But I don't understand the reason it generates me a lot of labels as if the cycle were not closed or stopped only after something else

this is my html before

<div class="column one">
<span class="wpcf7-form-control-wrap nome">
<input type="text" placeholder="Nome e Cognome*" style="font-size: 16px; line-height: 20px;">
</span>
</div>

this is html after:

<div class="column one">
<span class="wpcf7-form-control-wrap nome">
<input type="text" name="nome" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required resizedFontJQ" aria-required="true" aria-invalid="false" placeholder="Nome e Cognome*" style="font-size: 16px; line-height: 20px;">
    </span> 
    <label class="addedLabel">Nome e Cognome*</label>
    <label class="addedLabel">Nome e Cognome*</label>
    <label class="addedLabel">Nome e Cognome*</label>
    <label class="addedLabel">Nome e Cognome*</label>
    <label class="addedLabel">Nome e Cognome*</label>
    <label class="addedLabel">Nome e Cognome*</label>
    <label class="addedLabel">Nome e Cognome*</label>
</div>

The jQuery i used: 

jQuery(".wpcf7 .column input").each( function () {
      var inputTextLabel= jQuery(".wpcf7 .column input").attr("placeholder")
      jQuery(".wpcf7 .column input").closest("div").append("<label class='addedLabel'>" + inputTextLabel + "</label>");
    });

Upvotes: 0

Views: 1264

Answers (2)

muka.gergely
muka.gergely

Reputation: 8329

You could try this:

HTML

<div class="column one">
  <span class="wpcf7-form-control-wrap nome">
    <input type="text" placeholder="Nome e Cognome*" style="font-size: 16px; line-height: 20px;">
  </span>
</div>

JS

jQuery(".wpcf7 .column input").each( function () {
  var inputTextLabel= jQuery( this ).attr("placeholder")
  jQuery(this).closest("div").append("<label class='addedLabel'>" + inputTextLabel + "</label>");
});

Upvotes: 0

Quentin
Quentin

Reputation: 943108

Look at your logic.

For each of the elements that match your selector, you are appending some HTML to everything that matches jQuery(".wpcf7 .column input").closest("div").

You need to pay attention to the specific element each time you go around the loop.

jQuery(".wpcf7 .column input").each( function (index, element) {
  var $element = $(element);
  var inputTextLabel= $element.attr("placeholder")
  $element.closest("div").append("<label class='addedLabel'>" + inputTextLabel + "</label>");
});

Upvotes: 4

Related Questions