jquery - 使用 jQuery 在元素内包装文本

Question

我有一些这样的元素:

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

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

现在我需要给这些方框上色，例如第 1 队变蓝，第 2 队变红。但是我该怎么做呢？

每个团队都是一个大家族的成员，这个大家族提供了团队的颜色。所以我有一张带有氏族颜色的表格。

我正在使用一个 MySQL 表(两个表 teams 和 clans)。在团队表中，我在战队表中有一个战队 ID 的外键字段

Answer 1

所以这很简单。如果你有一张包含你的氏族及其颜色的表，你可能在你的团队表中有一个字段，其中用外键写入了氏族，对吗？

因此，您的查询还应该通过内部联接获取氏族的颜色。

因此您可以像这样将氏族颜色字段作为类导出到您的代码中:

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

然后您可以使用“.team-color-[CLANCOLORVARIABLE] {}”在 CSS 中设置颜色

但是如果你想按照要求用 jQuery 包装你的文本，你可以这样做:

因此，如果您将颜色作为元素中的类名，那将是完美的。然后在 jQuery 中你可以做这样的事情:

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

然后您的文本会被换行并可以使用 css 设置进行格式化