Question

我正在尝试添加一个新的div，它将包含我网站上的一些内容。我可以使用wrapInner来处理它，但是在我的情况下这不起作用，因为我正在包装的内容包含2个脚本（facebook和youtube）。这两个脚本最终运行两次，最终在两个不同位置的页面上运行。（我想这是wrapInner的一个已知问题。）

该页面是Saas环境中托管解决方案的一部分。我对页面代码的访问权限非常有限。该页面正在加载jQuery v1.3.2并且我无法访问head部分，所以我无法将其更改为更新的版本。我也无法更改facebook或youTube脚本，它们是硬编码的，无法访问。我的脚本必须在body标签内运行。我可以添加PHP，如果这有助于任何人提出解决方案。

这是我的页面布局：

<div class="content-main">
  <div class="detail">
    ...additional content...
    <facebok script>
    <youtube script>
    ...additional content...
  </div>
</div>

这就是我想要的：

<div class="content-main">
  <div class="detail">      
    <div id="my_New_Div">         <-- New div starts here
      ...additional content...
      <facebok script>
      <youtube script>
      ...additional content...
    </div>                        <-- New div ends here 
  </div>
</div>

这是我正在使用的脚本：

 <script type="text/javascript">
   // add an extra div for design
   $('.content-main .detail').wrapInner('<div class="detail-inside"></div>');
 </script>

Answer 1

这应该适用于Jquery 1.0

var content = $('.content').html();
$('.content').empty().html('<div class="my_New_Div">' + content + '</div>');

或作为插件：

(function($){
    $.fn.wrapInner2=function(wrapWith){
        return this.each(function(){
            var c = $(wrapWith).append($(this).html());
            $(this).empty().append(c);
        });
    }
})(jQuery);

Answer 2

这是一个替代方法。

我注意到我的jQuery脚本在页面中的位置影响了html中的输出。具体来说，一组facebook和youTube实例将显示它们最初在页面中调用的位置（我的设计的正确位置），而另一组（不需要的）将显示在我放置jQuery脚本的任何位置。

所以我的解决方法是将我的脚本放在一个样式为display：none的div中。这很有效。

我仍然希望找到一个更好的解决方案，让内部脚本不再重复，所以我会把这个问题保持开放。

wrapInner（）替代方案

2 个答案: