Question

我想在jquery中创建一个插件。

这是我的HTML代码：

<div class="popup">
  <div class="bc_top">
    <div class="bc_tl"></div>
    <div class="bc_tm"></div>
    <div class="bc_tr"></div>
  </div>
  <div class="bc_middle">
    <div class="bc_ml">
      <div class="bc_mr">
        <div class="bc_cnt">




        </div>
      </div>
    </div>
  </div>
  <div class="bc_bottom">
    <div class="bc_bl"></div>
    <div class="bc_bm"></div>
    <div class="bc_br"></div>
  </div>
</div>

我想在我的标签周围插入代码，我的标签html内容应插入div.bc_cnt，所以我写了一个jQuery插件：

$.fn.popup = function() {
    $(this).before('<div class="popup">\
                      <div class="bc_top">\
                        <div class="bc_tl"></div>\
                        <div class="bc_tm"></div>\
                        <div class="bc_tr"></div>\
                      </div>\
                      <div class="bc_middle">\
                        <div class="bc_ml">\
                          <div class="bc_mr">\
                            <div class="bc_cnt">'+$(this).html()+'</div>\
                          </div>\
                        </div>\
                      </div>\
                      <div class="bc_bottom">\
                        <div class="bc_bl"></div>\
                        <div class="bc_bm"></div>\
                        <div class="bc_br"></div>\
                      </div>\
                    </div>');   

}

我这样使用：

<scritp>
    $('div#pop').popup();
</script>


    <div id="pop">
        this is a test
    </div>

一切正常但是这段代码只插入了选中标签的html内容以弹出$（this）.html（），我想在弹出窗口中插入完整标记（我的意思是<div id="pop">this is a test</div>）

我该怎么办？

P.S：抱歉我的英语不好。

Answer 1

您应该尝试使用$（this）.text（）

Answer 2

你可以克隆orig元素，将它附加到临时div并获取div的html。见下文，

$('<div>').append($(this).clone()).html()

DEMO

如果您要删除原始文件，可以在函数末尾使用.remove $(this).remove()

在我的html标签周围创建标签

2 个答案: