在 jquery replaceWith 中连接字符串的正确语法是什么答案

【问题标题】：What is the correct syntax for concatenating strings within jquery replaceWith在 jquery replaceWith 中连接字符串的正确语法是什么
【发布时间】：2013-04-09 22:50:35
【问题描述】：

我有以下 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作为目标

我的咖啡脚本函数看起来像这样

jQuery ->
  $(".old-wrapper").repaceWith(
    $("<div class='new-wrapper'>") +
    $("<input type='text' class='date-picker'>").datepicker +
    $("</div>")
  )

在 replaceWith 函数中连接这些字符串的正确方法是什么？（抱歉这是一道很基础的javascript语法问题，但是我的javascript知识有限）

【问题讨论】：

标签： jquery coffeescript datepicker replacewith

【解决方案1】：

你有一个语法错误开始：

$("<div class="wrapper>")
  ^           ^        ^
open        close     ???

该代码的其余部分也是无效的。

试试这个：$(".date-wrapper").wrapInner('<div class="wrapper" />');

您应该看看网站上的教程部分：http://docs.jquery.com/Tutorials

【讨论】：

【解决方案2】：

这应该可行！

jQuery ->
    $('.date-wrapper')
        .append($('<div class="wrapper" />'))
        .find('.wrapper')
        .append($('<input type="text" class="date-picker">').datepicker())

【讨论】：

【解决方案3】：

~~可能是这样的..~~

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

【讨论】：

【解决方案4】：

这是我的尝试。请注意，我正在根据原始问题寻找课程old-wrapper。

我还使用了将内部调用放入它们自己的函数中的技术，我认为这可以使代码更加整洁。

这是一个jsFiddle，显示了下面的代码

getDatePicker=->$('<input/>', {type:'text', class:'date-picker'}).datepicker()

getWrapper=->$('<div/>', {class:'new-wrapper'}).append getDatePicker()

$ -> $('.old-wrapper').replaceWith getWrapper()

【讨论】：