how to colorize a string/word in html/jquery

Question

I am trying to colorize a string/word in HTML. I found a response here - but I am having trouble understanding how to convert to use the function more than once..

http://jsfiddle.net/8VDm4/

<div id="arch" style="font-size: 40px">First Word work fine</div>
<div id="arch" style="font-size: 40px">Second time - does not work</div>



var colours = ["#635636", "#FF00C0", "#990066", "#FF9966", "#996666", "#00FF00", "#CC9933"], 
idx;

$(function() {
var div = $('#arch'); 
var chars = div.text().split('');
div.html('');     
for(var i=0; i<chars.length; i++) {
    idx = Math.floor(Math.random() * colours.length);
    var span = $('<span>' + chars[i] + '</span>').css("color", colours[idx]);
    div.append(span);
}
});

How to create a function that I can call multiple times in a HTML?

you can only have one element with a particular id

Ejaz
– Ejaz

2014-05-06 17:55:19 +00:00
Commented May 6, 2014 at 17:55 — Ejaz
– Ejaz, Commented May 6, 2014 at 17:55

Ejaz · Accepted Answer · 2014-05-06 18:34:29Z

1

You can only have one element with a particular id. Replace your id with class (or add a particular class to elements) like follows

<div class="arch" style="font-size: 40px">First Word work fine</div>
<div class="arch" style="font-size: 40px">Second time - does not work</div>

javascript

//code has been update in response of observation made by adeneo, thanks adeneo

var colours = ["#635636", "#FF00C0", "#990066", "#FF9966", "#996666", "#00FF00", "#CC9933"],
    idx;

$(function () {
    $('.arch').each(function () {
        var div = $(this),
            chars = div.text().split(''),
            span = '';

        div.html('');
        for (var i = 0; i < chars.length; i++) {
            idx = Math.floor(Math.random() * colours.length);
            span = span + $('<div>').append($('<span>' + chars[i] + '</span>').css('color', colours[idx])).html();
        }
        div.append(span);
    });
});

I've added some code to avoid frequent update of DOM

edited May 6, 2014 at 18:34

answered May 6, 2014 at 17:58

Ejaz

8,8723 gold badges38 silver badges52 bronze badges

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

8 Comments

adeneo Over a year ago

That surely can't work, div.text() and div.html() would work on both elements at the same time ?

Ejaz Over a year ago

I tried with making minimum changes to the code (replace id with class) and it worked (in firefox. checking in other browsers)

Ejaz Over a year ago

update: works in google chrome and internet explorer too, so probably jQuery is doing some magic or identifying the collection and working on one element at a time?

adeneo Over a year ago

I don't believe you, show me it working in a fiddle (tip: you can borrow Jay's fiddle, it has the same errors.)

Ejaz Over a year ago

please believe me :D I see colorized strings in jay's fiddle too

|

Jay Blanchard · Accepted Answer · 2014-05-06 17:58:02Z

0

Change the id's on your div's to classes -

<div class="arch" style="font-size: 40px">First Word work fine</div>
<div class="arch" style="font-size: 40px">Second time - does not work</div>

And then change your selector in your jQuery -

var div = $('.arch');

http://jsfiddle.net/8VDm4/2/

answered May 6, 2014 at 17:58

Jay Blanchard

34.5k17 gold badges82 silver badges130 bronze badges

Comments

Hughes · Accepted Answer · 2014-05-06 18:00:15Z

0

As Ejay has mentioned, it doesn't work because you used ID's. You can only use an ID once on a page. What you want to use are classes.

Markup:

<div class="arch">You content</div>

Javascript:

var div = $('.arch');

I've also updated the JSFiddle: http://jsfiddle.net/8VDm4/1/

answered May 6, 2014 at 18:00

Hughes

1,0652 gold badges11 silver badges30 bronze badges

Collectives™ on Stack Overflow

how to colorize a string/word in html/jquery

3 Answers 3

8 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related