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

回答

相關問題