Question

我正在重构我的一个jquery ui小部件。
为了得到更清晰的代码，我用模板做基本的html东西小部件的基本容器是div。小部件用户可能会这样设计：

 <div id="mywidget" class="status" style="margin-top: 10px; width: 250px;"></div>

现在，在widget源代码中，我在字符串中有基本的html元素：

 '<div class="ui-grouping ui-widget ui-widget-content ui-corner-all">' +
 '<span class="ui-grouping-detail"><img src="....

当用户使用$（'＃mywidget'）创建窗口小部件时.abcd（）;我不想将html-string附加到基本div，但我想将字符串合并到基本div中，以便最终结果如下所示：

 <div id="mywidget" class="status ui-grouping ui-widget ui-widget-contet ui-corner-all" 
   style="margin-top: 10px; width: 250px;">
 <span class="ui-grouping-detail"><img src=" ...

我找不到函数$（'＃mywidget'）。mergeWith（“....”）。
什么是一个很好的解决方案？
非常感谢沃尔夫冈

更新：感谢Didier Ghys的回答但我想摆脱你提出的解决方案。您的解决方案是在jquery ui小部件中完成工作的标准方法。你必须长时间搜索才能在jquery小部件中找到模板的用法（为了获得标记和javascript的分离，从而获得更清晰/更清晰的代码）。据我所知，在dojo小部件中，在小部件中使用模板更为常见。所以，再次感谢Didier Ghys，但我寻找另一种解决方案。

Answer 1

我认为你不应该将基本元素存储为字符串，只需将这些类以编程方式添加到插件用户提供的标记中：

$('<div id="mywidget" class="status" style="margin-top: 10px; width: 250px;"></div>')
    .addClass('ui-grouping ui-widget ui-widget-content ui-corner-all')
    .append('<span class="ui-grouping-detail">')

这就是你要追求的吗？

Answer 2

http://jsfiddle.net/DaKeg/

var str = '<div class="ui-grouping ui-widget ui-widget-content ui-corner-all">' +
 '<span class="ui-grouping-detail">dskfjsdmf</span></div>';

$("#mywidget").addClass(getFirstClass(str));
$("#mywidget").append(getElementInside(str));

function getFirstClass(_str){
    return $(_str).closest('div').attr('class');
}
function getElementInside(_str){
    return $(_str).closest('div').children();
}

jquery合并元素

2 个答案: