Wrap text inside of an element with jQuery

user4400028

I have some elements like this:

<div class="box">
    Team 1 - #5
</div>

<div class="box">
    Team 2 - #3
</div>

And now I need to colorize these boxes like team 1 is getting blue and team 2 is getting red. But how can I do this?

Every Team is a member of a big clan which provides the color of the team. So I have a table with the clan color.

I'm using a MySQL table (two tables teams and clans). In the team table I have a foreign key field for the clan ID in the clan table

ismaelw

So that’s easy. If you have a table with your clan and its colors you have likely a field in your team table where the clan is written in with a foreign key right?

So your query should also get the color of the clan with an inner join.

so you can export the field of the clan color as class into your code like this:

<div class="box team-color-<?php echo $clan_color; ?>">
    Team 1 - #3
</div>

And then you can set the color thing in CSS with ".team-color-[CLANCOLORVARIABLE] {}"

But if you want to wrap your text with jQuery as asked you could do this:

So it would be perfect if you have your color as a classname in your elements. Then in jQuery you can do something like this:

$('.team-color-black').each(function() {
   var content = $(this).text;
   content.html('<span class="colorsetting">' + content + '</span>');
});

Then your text gets wrapped and can be formatted with css settings

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

Use jQuery to wrap text after element

From Dev

Wrap each line text to an element using JQuery

From Dev

Maximizing text inside an element with jQuery

From Dev

How to wrap all elements inside a div after a certain element? (JQuery)

From Dev

replace the text of an element inside a variable in jquery

From Dev

JQUERY How to add class with text inside element

From Dev

Get text inside selected element jQuery

From Dev

Conditional statement for replacing text inside of an element with jQuery

From Dev

wrap content inside parent element

From Dev

Wrap image inside a div element

From Dev

Jquery - append element after an element's text with multiple elements inside

From Dev

wrap only text inside a span

From Dev

text wrap in a div - example inside

From Dev

wrap element around span text

From Dev

Wrap text within element LXML

From Dev

Jquery wrap elements inside div

From Dev

How to wrap an element with a div in jQuery?

From Dev

Wrap element after image with jquery

From Dev

jQuery - How to move some tag element with text inside to closest div

From Dev

Get text inside a anchor list element using jquery library

From Dev

jQuery wrap text without container

From Dev

Input Field text wrap with jQuery

From Dev

jQuery: how to wrap selected text

From Dev

Centering text inside of an element

From Dev

Centering text inside of an element

From Dev

Wrap substring of element content with an element using jQuery

From Dev

Wrap text to new line inside table cells

From Dev

How to wrap text inside a absolute positioned span?

From Dev

How to wrap the text inside a shape using Cytoscape?