Question

我一直在寻找一种使用jQuery来翻译HTML的方法。例如，我想改变

<myTag name1="sally" name2="billy" datingFor="3" />
<myTag name1="jill" name2="tom" datingFor="4" />

到另一种形式，如

<div>SALLY has been dating BILLY for 3 months</div>
<div>JILL has been dating TOM for 4 months</div>

使用在文档准备好后执行的jQuery函数。

有一种简单的方法吗？我知道我可以使用$('#div').html('New Text')之类的东西，但是当我有参数（例如name或datingFor字段）时，这种方法似乎不适用。

Answer 1

试试这个：

$('myTag').each(function() {
    var $this = $(this),
        name1 = $this.attr('name1'),
        name2 = $this.attr('name2'),
        dating = $this.attr('datingFor');

    $this.replaceWith($('<div/>').text(name1 + ' has been dating ' + name2 + ' for ' + dating + ' months'));
});

工作演示：http://jsfiddle.net/92ctS/但我必须修改从<myTag/>到<myTag></myTag>的代码才能让它在Firefox上运行。

这适用于原始代码：http://jsfiddle.net/92ctS/1/

Answer 2

尝试

$('myTag').replaceWith(function () {
    var $this = $(this);
    return '<div>' + $this.attr('name1') + ' has been dating ' + $this.attr('name2') + ' for ' + $this.attr('datingFor') + ' months</div>'
})

更新：由于OP有一个字符串

var string = '<myTag name1="sally" name2="billy" datingFor="3" /><myTag name1="jill" name2="tom" datingFor="4" />';

var list = $(string).map(function () {
    var $this = $(this);
    return '<div>' + $this.attr('name1') + ' has been dating ' + $this.attr('name2') + ' for ' + $this.attr('datingFor') + ' months</div>'
}).get();

$('body').append(list.join(''))

演示：Fiddle

Answer 3

的 jsFiddle Demo 的

var myTags = $('myTag'); myTags.each(function(i){ var name1 = $(this).attr('name1'); var name2 = $(this).attr('name2'); var datingFor = $(this).attr('datingFor'); $('.container').append('<div>' + name1 + ' has been dating '+ name2 + 'for '+ datingFor + ' months</div>'); //$(this).replaceWith('<div>' + name1 + ' has been dating '+ name2 + 'for '+ datingFor + ' months</div>'); });

如果您想将现有的myTag替换为生成的div。使用.replaceWith()而不是.append()。

使用jQuery使用属性更改HTML

3 个答案: