Hi everyone ! Does anyone know how to set a new tagName to a tag using Jquery? Let's say i have an HTML document and I want to replace all 'fieldset' width 'div'. Thanks in advance !
A:
You can use the replaceWith or the replaceAll functions to replace elements.
You have to manually place the content from the old element to the new element.
$('fieldset').each(function(object){
var html = this.html();
this.replaceWith('div').html(html)
});
Something like this. The code is not tested.
Ikke
2009-11-04 10:53:17
I think you'd need to save the HTML contents before calling replaceWith() first, something like (inside of the obove function body):var h = $(this).html();$(this).replaceWith('div').html(h);
Krof Drakula
2009-11-04 11:12:50
Yeah, I was suspecting that.
Ikke
2009-11-04 11:42:24
I had tried this : $("fieldset").each(function(i) { var fieldsetContent = $(this).html(); $(this).replaceWith("<div class='fieldset'>" + fieldsetContent + "</div>"); })but it did not work the way i expected... Any ideas?
pinkbubble
2009-11-04 12:20:33
Actually, im using jquery-1.js, and it returns an error that says that html() is not a function...
pinkbubble
2009-11-04 12:23:37
+2
A:
fs = $("fieldset");
for (i = 0; i < fs.length; i++) {
var that = $(fs[i]);
var fieldsetContent = that.html();
that.replaceWith('<div>'+fieldsetContent+'</div>');
};
or try for overflow this css fix css:
fieldset {
display: table-column;
}
<!–[if IE]>
fieldset {
display: block;
}
Than you can set other styles.
jmav
2009-11-04 12:24:29
i upgraded my Jquery version, but still it doesnt work...Here is my code <code> /*$("fieldset").each(function(i) { fieldsetContent = $(this).innerHTML(); $("<div class='fieldset'>" + fieldsetContent +"</div>").replaceAll("fieldset"); });*/</code>
pinkbubble
2009-11-04 12:37:21
Thanks jmav, i have tried your solution but it didnt work the way i want. When i do an alert of 'fieldsetContent', it does return the content of my fieldset, but when i put it inside my 'replaceWith' funcion parameters, it does not do anything... I can either solve one side of the problem (ok to change my fieldset to div), but when i combine it by adding the fieldset content, nothing happens....
pinkbubble
2009-11-04 15:47:30
I tried codemyself and it works.Plase send whole unmodified page and page you would like to have.I will try to help you.Do you use firebug??
jmav
2009-11-05 12:57:33
It's better to use for function and not each. It's faster.Look http://net.tutsplus.com/tutorials/javascript-ajax/10-ways-to-instantly-increase-your-jquery-performance/ section 3
jmav
2009-11-05 12:59:45
You can see my fix if it is appropriate for you:http://stackoverflow.com/questions/1673346/fieldset-firefox-overflow-css-fix
jmav
2009-11-05 13:07:03
A:
Maybe it's less complicated and more effective to try and solve the root of the problem. I can't imagine that there is something hard-coded into Firefox that causes fieldsets to be cut off. I'm 99% sure this can be helped with some CSS. Maybe there you can find more info, or more on-the-spot help, in Mozilla's forums? Maybe examining fieldsets and divs with firebug, and comparing their settings one by one, helps?
Pekka
2009-11-04 13:50:50
Hi, i already tried all this... The problem has been reported but the solutions given did not solve my problem. But the point of my post is to find out if there is a way to replace a tagname and keep its content.
pinkbubble
2009-11-04 15:42:09
A:
I don't know what kind of environment you're in, but maybe the easiest thing would be to set up a "print view" page that dynamically reads the original HTML page and does a low-level replacement in the source code?
In PHP, it would look like this:
$body = str_replace("<fieldset>", "<div>", $body);
$body = str_replace("</fieldset>", "</div>", $body);
Very low level but could work if the HTML is clean.
Pekka
2009-11-04 15:57:43