.wrap（）

Question

我正在努力找到一个正确的选择器来用于围绕一个特定行包装一个新的div。挑战在于没有一行具有唯一标识符。

<div id="message-board-forum">
<div class="table-wrapper">
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
</div>
</div>

$("#message-board-forum > div.table-wrapper > div.row:nth-child(1)").wrap('div class="forum-toolbar-wrapper"');

上面的jQuery没有提出任何错误，但是当页面处理第一行时没有被包装

<div class="forum-toolbar-wrapper"></div>

Answer 1

使用

.wrap('<div class="forum-toolbar-wrapper"></div>');

OR

.wrap('<div class="forum-toolbar-wrapper">');

您需要添加<和>来包装div标签。

.wrap（）

使用.wrap（），我们可以在内部元素周围插入HTML结构，如下所示：

$( ".inner" ).wrap( "<div class='new'></div>" );

新元素即时创建并添加到DOM中。结果是每个匹配的元素都包含一个新的：

参考：https://api.jquery.com/wrap/

/*

$("#message-board-forum > div.table-wrapper > div.row:nth-child(1)").wrap('<div class="forum-toolbar-wrapper"></div>');

$("#message-board-forum > div.table-wrapper > div.row:first-child").wrap('<div class="forum-toolbar-wrapper"></div>');

$("div.table-wrapper .row").first().wrap('<div class="forum-toolbar-wrapper"></div>');

$(".table-wrapper .row").first().wrap('<div class="forum-toolbar-wrapper"></div>');

*/

.forum-toolbar-wrapper {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<div id="message-board-forum">
  <div class="table-wrapper">
    <div class="row">11</div>
    <div class="row">22</div>
    <div class="row">33</div>
    <div class="row">44</div>
  </div>
</div>
<script>
  $(".table-wrapper .row").first().wrap('<div class="forum-toolbar-wrapper"></div>');
</script>

如何围绕特定行包装新div？

1 个答案:

.wrap（）