Question

我有一些格式很差的HTML代码，其中表中的每个元素都是一行。我想通过向页面添加一些HTML来更轻松地对子元素进行分组。以下是HTML的一个小例子：

<html>
  <head>
    <title>Test</title>
  </head>
  <body>
    <table width="100%">
      <tr class="heading">
        <td>value 1</td>
      </tr>
      <tr>
        <td>sub 1</td>
      </tr>
      <tr>
        <td>sub 1</td>
      </tr>
      <tr class="heading">
        <td>value 2</td>
      </tr>
      <tr>
        <td>sub 2</td>
      </tr>
      <tr class="heading">
        <td>value 3</td>
      </tr>
      <tr>
        <td>sub 3</td>
      </tr>
    </table>
  </body>
</html>

我想用一个标题类包装每一行，用另一个tr或div或者任何东西来让我更轻松地抓住子元素。我尝试过各种各样的before，html等组合。但我似乎无法让它工作。

这是我放在一起的jsfiddle。用一类标题包装tr值的任何方法？例如，我想在示例HTML中使用类标题获取3行。我想在第一行前加上一些HTML，然后在第二行开始之前关闭它。我会为每一行重复这个过程（打开一个标签并在下一行之前关闭它），在最后一行我只是关闭它。

所以我想要的输出是：

<html>
  <head>
    <title>Test</title>
  </head>
  <body>
    <table width="100%">
      <SOME_TAG>
        <tr class="heading">
          <td>value 1</td>
        </tr>
        <tr>
          <td>sub 1</td>
        </tr>
        <tr>
          <td>sub 1</td>
        </tr>
      </SOME_TAG>
      <SOME_TAG>
        <tr class="heading">
          <td>value 2</td>
        </tr>
        <tr>
          <td>sub 2</td>
        </tr>
      </SOME_TAG>
      <SOME_TAG>
        <tr class="heading">
          <td>value 3</td>
        </tr>
        <tr>
          <td>sub 3</td>
        </tr>
      </SOME_TAG>
    </table>
  </body>
</html>

Answer 1

基于kssr的建议 - 使用nextUntil和wrapAll将它们包装在子表中

$(document).ready(function()
    {
        wrapTR(0);
    });

    function wrapTR(index)
    {
        $('tr.heading:eq('+index+')').nextUntil('.heading').andSelf().wrapAll('<table class="useful-grouping" id="table-'+index+'"/>');
        if($('tr.heading:eq('+index+')').next('.heading'))
        {
            wrapTR(index+1)
        }
    }

Jquery包装格式不正确的HTML

1 个答案: