CODEWITHSUNDEEP
javascriptjqueryhtmleachlabel
user3241620
user3241620

Reputation: 95

How to replace label content with .each

I want to write a script that would resize labels length if its longer than 30 characters, but can't find the reason why it stays the same. jsfiddle: http://jsfiddle.net/rokas_m/9g3bcamz/10/

HTML:

<label>labelislabelislabelislabelislabelislabelislabelis</label><Br/>
<label>kitaskitaskitaskitaskitaskitaskitaskitaskitaskitaskitas</label><br/>
<label>asdfasdfsadfasdfsdfdsftaskitaskitaskitas</label><br/>

<label>siaip</label><br />
<label>siaip</label><br />
<label>siaip</label><br />

jQuery:

$('label').each( function(){ 
    var string = $(this).text();
    var ilgis = $(this).text().length;
   if (ilgis > 30){
   var string = string.substr(0,17)+'...';
     $( 'label' ).innerHTML = string;
        console.log(string);
   }

}
);

Upvotes: 1

Views: 438

Answers (3)

user5134497
user5134497

Reputation:

Refer this

$('label').each( function(){ 
    var string = $(this).text();
    var ilgis = $(this).text().length;
   if (ilgis > 30){
   var string = string.substr(0,17)+'...';
     jQuery(this).html(string);
        console.log(string);
   }

}
);

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388316

You can use .text() set the value by passing a callback function as its argument which will be called for each label, like

$('label').text(function(i, text) {
  return text.length > 30 ? text.substr(0, 17) + '...' : text;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label>labelislabelislabelislabelislabelislabelislabelis</label><Br/>
<label>kitaskitaskitaskitaskitaskitaskitaskitaskitaskitaskitas</label><br/>
<label>asdfasdfsadfasdfsdfdsftaskitaskitaskitas</label><br/>

<label>siaip</label><br />
<label>siaip</label><br />
<label>siaip</label><br />

Or

$('label').each(function() {
  var string = $(this).text();
  var ilgis = string.length; //reuse the variable
  if (ilgis > 30) {
    string = string.substr(0, 17) + '...';
    $(this).html(string);//$(...) returns a jQuery object so don't have `innerHTML` property, also you need to target the current `label` not all of them
    //or just
    //this.innerHTML = string
    console.log(string);
  }

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label>labelislabelislabelislabelislabelislabelislabelis</label><Br/>
<label>kitaskitaskitaskitaskitaskitaskitaskitaskitaskitaskitas</label><br/>
<label>asdfasdfsadfasdfsdfdsftaskitaskitaskitas</label><br/>

<label>siaip</label><br />
<label>siaip</label><br />
<label>siaip</label><br />

Upvotes: 3

Pramod Karandikar
Pramod Karandikar

Reputation: 5329

Replace this $( 'label' ).innerHTML = string; with $(this).html(string);.

Here's the modified code:

$('label').each( function(){ 
    var string = $(this).text();
    var ilgis = $(this).text().length;
    if (ilgis > 30){
      var string = string.substr(0,17)+'...';
      $(this).html(string);
    }
   }
);

Upvotes: 1

Related Questions