Question

我如何使用wrap（）将后续元素包装在<div>？

中

例如：

<tr class="main"></tr>
<tr></tr>
<tr></tr>
<tr></tr> 
<tr class="main"></tr>
<tr></tr>
<tr></tr>
<tr class="main"></tr> 
<tr></tr>
<tr></tr>
<tr></tr>

etc

我想在tr周围包裹一个<div>，结果就是：

<div>
    <tr class="main"></tr>
    <tr></tr>
    <tr></tr>
    <tr></tr>
 </div>
<div>
  <tr class="main"></tr>
  <tr></tr>
  <tr></tr>
  <tr></tr>
</div>
<div>
  <tr class="main"></tr>
  <tr></tr>
  <tr></tr>
  <tr></tr>
  <tr></tr>
  <tr></tr>
</div>

Answer 1

生成的标记无效，因为tr标记的允许父元素为<table>，<thead>，<tbody>或<tfoot>元素。

无论如何，您可以使用nextUntil()方法获得结果。

// get all tr with main class and then
// iterate over them
$('.main').each(function() {
  // get elements upto next `.main` element
  $(this).nextUntil('.main')
    // include current element
    .add(this)
    // wrap with div
    .wrapAll('<div/>');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr class="main"></tr>
  <tr></tr>
  <tr></tr>
  <tr></tr>
  <tr class="main"></tr>
  <tr></tr>
  <tr></tr>
  <tr class="main"></tr>
  <tr></tr>
  <tr></tr>
  <tr></tr>
</table>

Answer 2

答案＃1：正如您所料

var parent = $('<div>');
$('tr.main').each(function() {
  var child = $('<div>');
  child.append($(this).nextUntil('tr.main'));
  parent.append(child);
});

答案＃2：在div内部使用表格以避免无效标记。

var parent = $('<div>');
$('tr.main').each(function() {
  var table = $('<table>');
  table.append($(this).nextUntil('tr.main'));
  parent.append(table);
});

jQuery - 如何包装以下元素？

2 个答案: