打开<div>在元素之前并在之后关闭它

Question

我正在创建一个 JQuery 插件。 我需要在一些代码之前和</div>之后自动添加一个<div id="id"> 。

当我使用$('#search').before('<div id=id>') ，div 会自动关闭...

这是代码：

<div id="id"></div>

<input type="text"value="" id="search"></input>
<select id="select"></select>
<table id="table"></table>
<div id="current"></div>
<div id="pagination"></div>

我需要在“#search”之前打开一个“div”并在“#pagination”之后关闭它

Answer 1

您当前代码的问题是您只能将整个元素插入到 DOM 中，也就是说，如果需要一个包含其结束标记的元素。

为了实现你想要的，你可以在选择所有必需的元素后使用wrapAll() ：

 $('#search, #select, #table, #current, #pagination').wrapAll('<div id="id" />');

 #id { border: 1px solid #C00; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <input type="text" value="" id="search" /> <select id="select"></select> <table id="table"> <tr> <td>#table</td> </tr> </table> <div id="current">#current</div> <div id="pagination">#pagination</div>

您可以通过在所有这些元素上放置相同的类而不是单独选择它们来使这更容易维护。

Answer 2

你可以使用 .wrap() 用 div 包裹任何元素：

$( "#search" ).wrap( "<div id='id'></div>" );