jQuery.wrap 其中内容不是直接后代

Question

我试图将选定的节点包装在一个不平凡的结构中，其中该节点将（不一定）是直接后代。看起来 wrap() 不足以在单行中使用。

我使用 replaceWith 让它工作，使用占位符语法替换原始 HTML。下面的代码运行良好，并且可以轻松地封装在 jQuery 插件中。但我很好奇是否有更好的解决方案。

var template = '<div>\
                  <div>...</div>\
                  <div>{{original}}</div>\
                  <div>...</div>\
                </div>';

$('p').each(function() {
  var o = $(this).html();
  $(this).replaceWith(template.replace('{{original}}', o));
});

Answer 1

对于更复杂的模板，您需要查看 jQuery 模板插件。它仍处于测试阶段，但看起来应该提供很大的灵活性。我原来的解决方案仍然更紧凑，但使用 jQuery.tmpl()< /a> 函数接近可行的解决方案。

对于更简单的情况，如上所述，您可能最好将其包装在 2 行插件中， 像这样：

$.fn.templateWrap = function(template) {
  return this.each(function() {
    var o = $(this).html();
    $(this).replaceWith(template.replace('{{original}}', o));
  });
}

然后使用以下方式调用它：（

$('#target').templateWrap('<div>...{{original}}...</div>');

下载jquery.templatewrap.min.js)