Group strings in a variable

Question

I have our customer data in the following format:

<table id="t01">
  <tr>
    <th>HEAD 1</th>
    <th>HEAD 2</th>     
    <th>HEAD 3</th>
  </tr>
  <tr id="Grp1">
    <td>Grp1 data</td>
    <td>Grp1 data</td>      
    <td>Grp1 data</td>
  </tr>
  <tr>
    <td>Grp1 data</td>
    <td>Grp1 data</td>      
    <td>Grp1 data</td>
  </tr>
  <tr>
    <td>Grp1 data</td>
    <td>Grp1 data</td>      
    <td>Grp1 data</td>
  </tr>
  <tr id="Grp2">
    <td>Grp2 data</td>
    <td>Grp2 data</td>      
    <td>Grp2 data</td>
  </tr>
  <tr>
    <td>Grp2 data</td>
    <td>Grp2 data</td>      
    <td>Grp2 data</td>
  </tr>
  <tr>
    <td>Grp2 data</td>
    <td>Grp2 data</td>      
    <td>Grp2 data</td>
  </tr>
<tr id="Grp3">
    <td>Grp3 data</td>
    <td>Grp3 data</td>      
    <td>Grp3 data</td>
  </tr>
  <tr>
    <td>Grp3 data</td>
    <td>Grp3 data</td>      
    <td>Grp3 data</td>
  </tr>
  <tr>
    <td>Grp3 data</td>
    <td>Grp3 data</td>      
    <td>Grp3 data</td>
  </tr>...
</table>

And moving the lines up and down depends on some state. Here is my js code:

if(val == valX){
 $("#Grp2").after($("#Grp1"))// This will hold only one tr.
 // move all Grp1 data rows and set after Grp2 data
}
if(val == valy){

 // move all Grp2 data rows on the top of all the rows
}

if(val == valz){
 // move all Grp3 data rows on the top of all the rows
}...

Since my question is:

• How can I move all three lines simultaneously up or down OR
• How can I get a group of three lines in a type variable combined = $("#Grp1") + $("#Grp1").next() + $("#Grp1").next();

Note . Because the Html structure is also used for some other purposes. Since I cannot change any structure in HTML

Answer 1

You can use .addto add elements to the jQuery collection:

var combined = $("#Grp1").add($("#Grp1").nextUntil("#Grp2"));

An equivalent way is .addBack:

var combined = $("#Grp1").nextUntil("#Grp2").addBack();