Jquery包装格式不正确的HTML

我有一些格式极其糟糕的HTML代码，其中表中的每个元素都是一行。我想通过在页面中添加一些HTML来使子元素更容易一些。下面是HTML的一个小例子：Jquery包装格式不正确的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或股利或真的没有什么东西，让我抢子元素比较容易。我尝试过以前的各种组合，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>

来源

2012-10-26 Scott

你到底想干什么？你不能用'DIV'包装'TR'。一个'TR'可以包裹在一个'THEAD' /'TBODY' /'TFOOT'里面。告诉我们你正在尝试做什么......以及你试图访问哪些子元素？ –

我无法弄清楚这将如何让你的生活更轻松。为什么不使用'tr.heading：eq（0）'，'tr.heading：eq（1）'，然后使用兄弟选择器？我怀疑答案是要学习jQuery的选择器的全部范围，而不是用一堆无用的包装类来制作你的HTML。 – meagar

我使用硒来基本解析这个页面，并获取有关每个元素的信息。为了可靠地做到这一点，我需要添加这些信息使其成为“可解析的”，否则当我进入下一个元素时，逻辑变得非常肮脏。 – Scott

基于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) 
     } 
    }

来源

2012-10-31 16:27:01

完美地演绎小提琴。不幸的是，当在真实页面上使用它时，我们会收到最大的调用堆栈错误，但是这对于小提琴非常有用。谢谢！ – Scott

Jquery包装格式不正确的HTML

回答

相关问题