我有以下html标记
<body>
<div class="old-wrapper">
...lots of stuff
</div>
</body>
我需要用coffeescript函数替换它以提供以下标记
<body>
<div class="new-wrapper">
<input type="text" class="date-picker">
</div>
</body>
我需要使用.old-wrapper
作为目标
我的coffeescript功能看起来像这样
jQuery ->
$(".old-wrapper").repaceWith(
$("<div class='new-wrapper'>") +
$("<input type='text' class='date-picker'>").datepicker +
$("</div>")
)
在replaceWith函数中连接这些字符串的正确方法是什么? (对不起,这是一个非常基本的javascript语法问题,但我的javascript知识有限)
答案 0 :(得分:0)
您有一个语法错误:
$("<div class="wrapper>")
^ ^ ^
open close ???
该代码的其余部分也是无效的。
试试这个:$(".date-wrapper").wrapInner('<div class="wrapper" />');
您应该查看网站上的“教程”部分:http://docs.jquery.com/Tutorials
答案 1 :(得分:0)
也许是这样..
jQuery ->
$('.date-wrapper').append(
$('<input type="text" class="date-picker" id="user_dob" value="' + dob + '" name="user[dob]" />').datepicker()
).wrapInner('<div class="wrapper" />')
$('.wrapper').unwrap()
而不是替换元素只需附加你的datepicker-input元素,然后像你需要的那样包装它,然后用 unwrap
删除包装元素。
在重新阅读问题之后,我发现我的方式有点错误; - )
对于您的问题,简单地替换所有日期包装元素并不是最简单的解决方案,然后再用新的包装器包装所有这些元素吗?
dob = '2013/4/9'
$ ->
$('.date-wrapper').replaceWith($('<input type="text" class="date-picker" id="user_dob" value="' + dob + '" name="user[dob]" />').datepicker())
$('.date-picker').wrapAll('<div class="wrapper" />')
产生
<div class="wrapper">
<input id="user_dob" class="date-picker hasDatepicker" type="text" name="user[dob]" value="2013/4/9">
</div>
<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"></div>
请参阅fiddle
答案 2 :(得分:0)
这应该有效!
jQuery ->
$('.date-wrapper')
.append($('<div class="wrapper" />'))
.find('.wrapper')
.append($('<input type="text" class="date-picker">').datepicker())
答案 3 :(得分:0)
这是我的尝试。请注意,我正在根据原始问题查找课程old-wrapper
。
我也在使用将内部调用放入自己的函数的技术,我认为这些函数可用于更简洁的代码。
以下是显示以下代码的jsFiddle
getDatePicker=->$('<input/>', {type:'text', class:'date-picker'}).datepicker()
getWrapper=->$('<div/>', {class:'new-wrapper'}).append getDatePicker()
$ -> $('.old-wrapper').replaceWith getWrapper()