jquery - 使用 jQuery 将 span 分成不同的元素

Question

我希望使用 jQuery 将这个跨度分成两个不同的 ID：

<span id="foo">0.00 (0.00%)</span>

结果看起来像：

<span id="foo1">0.00</span>
<span id="foo2">(0.00%)</span>

任何反馈表示赞赏。

Answer 1

这应该有效：

// obtain text and break it at the space
var t = $('#foo').text().split(' ');

// rename 'foo' and set its content
$('#foo').attr('id', 'foo1').text(t[0]);

// create new element and put it after foo
$('<span>', {id: 'foo2', text: t[1]}).insertAfter('#foo1');

Answer 2

将文本内容拆分为一个数组，为每个数组元素创建新节点，然后用新创建的元素替换当前标签：

$('#foo').replaceWith(function() {
    var $this = $(this);

    return $.map($this.text().split(' '), function(o, i) {
        return $('<span>', {
            id: $this.prop('id') + (i + 1),
            text: o
        }).get(0);
    });
});

当然，对于手头的实际问题来说，它可能有点太笼统了:)

Answer 3

var $foo = $('#foo');
var v = $foo.text().split(' ');

$foo.after($('<span id="foo2"></span>').text(v[1]));
$foo.after($('<span id="foo1"></span>').text(v[0]));

演示----> http://jsfiddle.net/ByFbK/3/

Answer 4

var orig = $('#foo').text().split(' '),str='';
$(orig).each(function (idx, elem) {
    str += '<span id="foo' + (idx + 1) + '">' + elem + '</span>';
});
$('#foo').replaceWith(str);

jsFiddle 示例