Question

我有一段：I want to put a ding in the universe.

我想更改文字中字符的属性，例如改变它的颜色，所以在这之后该段应该是这样的：

  I   w { {1}}  a  n  t ...

如何在jQuery中实现它？

Answer 1

我没有看到使用具有相同类别的跨度单独包装的重点，但是在这里：

var $p = $('p');

var array = $p.text().split('');

var result = '<span class="color">' +
              array.join('</span><span class="color">') + 
             '</span>';

$p.html(result);

编辑：如果您想分配不同的课程，可以这样做：

示例： http://jsfiddle.net/LnD6W/1/

var $p = $('p');

var array = $p.text().split('');

var colors = ['green','blue','orange','yellow','red'];

$.each(array, function( i ) {
    array[i] = '<span class="' + colors[ i % 5 ] + '">' + array[i] + '</span>';
});

$p.html(array.join(''));

CSS

.green { color:green; }
.blue { color: blue; }
.orange { color: orange; }
.yellow { color: yellow; }
.red { color: red; }

Answer 2

String.split（）和jQuery.wrap（）的某种组合可能会起到作用。

这样的事情:(未经测试，只是快速鞭打）

var paragraph = $('<p>I want to put a ding in the universe.</p>');
var text = paragraph.text();
var newText = '';
$.each(text.split(), function(i, val) {
    if (val != ' ') {
        newText = newText + $(val).wrap('<span class="color"></span>');
    } else {
        newText = newText + val;
    }
});
paragraph.html(newText);

Answer 3

响应有点慢，但我有一个有效的例子：http://jsfiddle.net/YgzhK/

$(document).ready(
    function()
    {
        var oldText = $("#text").text(); 
        $("#text").html("");

        for (var i = 0; i < oldText.length; i++)
        {
            if (oldText.charAt(i) != " ")
                $("#text").append("<span class='color'>" + oldText.charAt(i) +"</span>");
            else
                $("#text").append(" ");
        }
    });

Answer 4

由于字符不是DOM元素，因此您需要构建一个新的DOM：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <title>CharLoop</title>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
      <script type="text/javascript">
    $(document).ready(function() {
        $("p").each(function() {
            var $resultDom = $("<p/>");
            var $p = $(this);
            var text = $p.text();
            // Loop through every character in paragraph text
            for (var i=0, l = text.length; i < l; i++) {
                var $char = $("<span>" + text.charAt(i) + "</span>");
                // Set class
                $char.attr("class", "color" + i);
                // Set inline style if you don't want to hardcode alot of colors
                $char.css("color", "rgb(" + (i * 10) % 255 + "," + (i * 20) % 255 + "," + (i * 30) % 255 + ")");
                $resultDom.append($char);
            }
            $p.empty();
            $p.append($resultDom.children());
        });
    });
      </script>
   </head>
   <body>
      <p>I want to put a ding in the universe.</p>
      <p>Lorem ipsum</p>
   </body>
</html>

请注意，此方法可能不会很快，并且您正在清空段落（），因此每个非文本信息都将被删除，例如链接（<a />）将不会被删除保存。结果：

Result

jQuery：如何浏览<p>段中的所有字符？</p>

4 个答案: