0

我一直在寻找一种使用 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')方法，但是当我有参数（例如名称或约会字段）时，这种方法似乎不适用。

4

3 回答 3

2

尝试这个：

$('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/

于 2013-10-29T16:17:18.710 回答
1

尝试

$('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(''))

演示：小提琴

于 2013-10-29T16:15:53.817 回答
1

jsFiddle 演示

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.Use.replaceWith()而不是 . 替换现有的.append()。

于 2013-10-29T16:19:47.873 回答