CODEWITHSUNDEEP
jquery
BumbleBee
BumbleBee

Reputation: 10819

Wrap few elements and their child elements in side a tag . JQuery

I am trying to wrap dynamically generated elements and their child elements inside a <div> or <span> tag so that I can hide/show as per the requirement.

<tr>
  <td class="SubHeader1" colspan="3" rowspan="1">For those drivers:</td>
</tr>
<tr>
  <td class="TextBold" align="left" valign="middle">16.</td>
  <td class="TextBold" align="left" valign="middle">Text for Question 16:</td>
  <td class="TextBold" align="left" valign="middle">
   <input name="ctl00$DefaultContent$ctl15" type="text" class="TextNormal" style="width:36px;" />      
  </td>
</tr>
<tr>
   <td class="TextBold" align="left" valign="middle">17.</td>
   <td class="TextBold" align="left" valign="middle">Content for Question 17:</td>
   <td class="TextBold" align="left" valign="middle">
     <input name="ctl00$DefaultContent$ctl16" type="text" class="TextNormal" style="width:36px;" />
   </td>
</tr>

There are only two class=SubHeader1 in the entire page and I want to wrap the second <tr> and <td> containing the "SubHeader1" and also the following two <tr>s.

Here is what I was able to come up with seems not working.

$('.SubHeader1:eq(1)').parent().each(function () {
            $(this).add($(this).next()).wrapAll('<div class="HideShow"></div>');
  })

Thank in advance

BB

Upvotes: 0

Views: 156

Answers (1)

Sinetheta
Sinetheta

Reputation: 9449

Since jamming <div>s inside the working bits of a <table> will invalidate your html and only cause heartache, how about we give the <tr>s themselves a class which you can then use for show/hiding

var $target = $('.SubHeader1:eq(1)');// we'll cache this for readability
$target.add( $target.next() ).add( $target.next().next() ).addClass('HideShow');

Upvotes: 1

Related Questions