HTML:
<input type="text" class="text text-1" />
jQuery
$('input.text-1').wrap('<span class="textfield-1"></span>');
CSS:
.textfield-1 {
border: 1px solid #d00;
display: none;
}
wrap() doesn't seem to work. I don't see 's wrapped around input in firebug. If they were wrapped, inputs would be hidden with display:none, but they aren't.
What am I doing wrong here?
Thanks
Works ok for me. Is it possible that you have a javascript error on the page that is preventing the code from executing?
Here's my test. Element does become invisible and I can see that it is wrapped in the span.
<html>
<head>
<style type="text/css">
.textfield-1 {
border: 1px solid #d00;
display: none;
}
</style>
<script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(function(){
$('input.text-1').wrap('<span class="textfield-1"></span>');
});
</script>
</head>
<body>
<input type="text" class="text text-1" />
</body>
</html>
What do you get if you write, i.e. how many do you get back?
alert($('input.text-1').length)
?