Javascript render number array to span elements

Question

I want to render the following series of numbers as below:

1234567891234567892234567893234567894234567895

<span>1</span>
<span>2</span>
...
<span>9</span>
<span class="bold">1</span>
<span>2</span>
...

What is the best way considering that;

1.The total character length can be dynamic. For now we can consider it as above example.

2.I want some of the characters to be in bold as shown.

What is the best way to implement the same?

I was planning to create a static array with individual characters as:

1234567891234567892234567893234567894234567895

Then iterate and render them using jQuery.

PS: The sequence of numbers appearing and the boldness would always be the same even though the total length can change. (I think it is max 80 chars.)

You forgot to mention what pattern you use to determine which ones should be bold. Is it every tenth element should be bold? — Taplar
– Taplar, Commented Aug 2, 2017 at 18:38
1 how you are going to recognise bold 1 from your string? is it contain any tag there? — Death-is-the-real-truth
– Death-is-the-real-truth, Commented Aug 2, 2017 at 18:39
"I was planning to create a static array with individual characters as 1234567891234567892234567893234567894234567895 Then iterate & render them using jQuery" Seems like you already know what to do? — marcusshep
– marcusshep, Commented Aug 2, 2017 at 18:40

Farhad Bagherlo · Accepted Answer · 2017-08-02 19:47:25Z

2

var n='1234567891234567892234567893234567894234567895';
$.each(n.split(''),function(key,value){
  $("#NU").append($('<span/>',{text:value, class:((!(key%9)&key>0)?"bold":"")}));
});

.bold{color:blue;font-weight:bold}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="NU"></div>

edited Aug 2, 2017 at 19:47

answered Aug 2, 2017 at 18:47

Farhad Bagherlo

6,6993 gold badges30 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Anurag Singh Bisht · Accepted Answer · 2017-08-02 18:47:24Z

0

You can iterate through the array of numbers using forEach and use append to add the span recursively into the result div.

Also, you can check if the index is divisible by 10, to add the bold condition.

var num = "1234567891234567892234567893234567894234567895".split('');



num.forEach((n, i) => {
  if ((i + 1) % 10 === 0) {
    $('#result').append(`<span class='bold'>${n}</span>`);
  } else {
    $('#result').append(`<span>${n}</span>`);

  }
});

.bold {
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="result">
</div>

answered Aug 2, 2017 at 18:47

Anurag Singh Bisht

2,7514 gold badges22 silver badges27 bronze badges

1 Comment

Anurag Singh Bisht Over a year ago

It's a bit rude to down vote an answer which is perfectly fine without an explanation :/

Augusto Monteiro · Accepted Answer · 2017-08-02 18:49:57Z

0

you can create two strings, the first one with all the numbers that you want, the second with all bold numbers and do a loop on the all numbers string and check if the number is on the other if is it add the bold tag ig isn't just add the number

answered Aug 2, 2017 at 18:49

Augusto Monteiro

4911 gold badge3 silver badges16 bronze badges

Comments

Taplar · Accepted Answer · 2017-08-02 18:51:12Z

0

var test = '1234567891234567892234567893234567894234567895';

$(document.body).append($.map(test.split(''), function(element, index){
  var $span = $('<span>').text(element);
  
  if (!((index + 1) % 10)) $span.addClass('bold');
  
  return $span;
}));

.bold { font-weight: bold; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

answered Aug 2, 2017 at 18:51

Taplar

25k4 gold badges24 silver badges36 bronze badges

2 Comments

Farhad Bagherlo Over a year ago

dear friend, dont last char(5) to "bold"

Taplar Over a year ago

The question stated the pattern is 10n+10, but the example doesn't match that. I'm waiting on a follow up in the comments. @FarhadBagherlo

Collectives™ on Stack Overflow

Javascript render number array to span elements

4 Answers 4

Comments

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related