尝试使用Javascript替换字符串来使用脚本

时间:2013-11-28 14:57:57

标签: javascript jquery

我只是在编写这个脚本,但我无法弄清楚为什么它不会运行!任何帮助表示赞赏。

的Javascript

$(document).ready(function() {
var str = document.getElementById('size').innerHTML; 
var res = str.replace('<p>','<input type="checkbox" value="');
var res = str.replace('</p>','" id="size" name="size[]" checked />');
document.getElementById('size').innerHTML=res;
});

HTML

<div id="size">
    <p>xs</p>
    <p>s</p>
    <p>m</p>
    <p>l</p>
    <p>xl</p>
</div>

这是JS小提琴:http://jsfiddle.net/L2LGV/

4 个答案:

答案 0 :(得分:6)

你尝试这样做的方式并不是最好的方式。

请参阅我如何实施它的快速示例。

$(document).ready(function() {
    jQuery('#size p').each(function(){
        var html = '<input type="checkbox" value="' + jQuery(this).text() + 'id="size" name="size[]" checked />';
        jQuery(this).replaceWith(html);
    });
});

http://jsfiddle.net/L2LGV/5/

答案 1 :(得分:1)

首先,不包括jQuery。

然后在这里你的代码做什么:

var res = str.replace('<p>','<input type="checkbox" value="');
// replace str which is equal to <p>...</p> to <input type="checkbox" value="...</p>
var res = str.replace('</p>','" id="size" name="size[]" checked />');
// replace str which is equal to <p>...</p> to <p>" id="size" name="size[]" checked />

请尝试使用此代码:

var res = str.replace('<p>','<input type="checkbox" value="');
var res = res.replace('</p>','" id="size" name="size[]" checked />');

另外,如果要替换每次出现,请使用regexp:

var res = str.replace(/<p>/g,'<input type="checkbox" value="');
var res = res.replace(/<\/p>/g,'" id="size" name="size[]" checked />');

http://jsfiddle.net/L2LGV/6/

答案 2 :(得分:1)

1,你通过声明两次来覆盖res变量:

var res = str.replace('<p>','<input type="checkbox" value="');
var res = str.replace('</p>','" id="size" name="size[]" checked />');

应该是:

var res = str.replace('<p>','<input type="checkbox" value="');
res += str.replace('</p>','" id="size" name="size[]" checked />');

其次,你不包括jquery。

请注意using innerHTML is a bad idea!使用jQuery的html函数。最后但同样重要的是:当您选择getElementById的元素时,为什么要使用jQuery?!?使用$('#<id>') ..

答案 3 :(得分:1)

这是一个没有str.replace()的解决方案:

$(document).ready(function() {
    var list = document.getElementById('size').getElementsByTagName('p'), output = '';
    for(var i = 0; i < list.length; ++i){
        output += '<input type="checkbox" value="';
        output += list[i].innerHTML;
        output += '" id="size" name="size[]" checked />';
    }
    document.getElementById('size').innerHTML=output;
});

http://jsfiddle.net/L2LGV/7/