jQuery - Get all items with a specific class, that are right after the clicked object

Question

i have a table, where the first Element has the class inhalt

right after this tr, are more tr with class table2. See the HTML below.

    <div id="sh_details">
     <div class="sh_wasserzeichen"></div>
     <article>
       <dl id="sh_accordion">
         <dt id="sh_2016">Headline1</dt>
      <dd><table>

         <tr>
             <th>Überschrift1</th>
             <th>Überschrift2</th>
             <th>Überschrift3</th>
             <th>Überschrift3</th>
             <th>Überschrift3</th>
             <th>Überschrift3</th>
             <th>Überschrift3</th>
             <th>Überschrift3</th>
             <th>Überschrift3</th>
          </tr>
          <tr>
           <td class="inhalt">Inhalt1</td>
           <td>Inhalt2</td>
           <td>Inhalt3</td>
           <td>Inhalt2</td>
           <td>Inhalt3</td>
           <td>Inhalt2</td>
           <td>Inhalt3</td>
           <td>Inhalt2</td>
           <td>Inhalt2</td>
          </tr>

          <!--Untertabelle1-->
          <tr class="table2">
               <th>Sub_Überschrift1</th>
                  <th>Sub_Überschrift1</th>
                  <th>Sub_Überschrift1</th>
                  <th>Sub_Überschrift1</th>
                  <th>Sub_Überschrift1</th>
                  <th>Sub_Überschrift1</th>
                  <th>Sub_Überschrift1</th>
                  <th>Sub_Überschrift1</th>
                  <th>Sub_Überschrift1</th>
          </tr>
          <tr class="table2">
            <td>Sub_Inhalt1</td>
                   <td>Sub_Inhalt1</td>
                   <td>Sub_Inhalt1</td>
                   <td>Sub_Inhalt1</td>
                   <td>Sub_Inhalt1</td>
                   <td>Sub_Inhalt1</td>
                   <td>Sub_Inhalt1</td>
                   <td>Sub_Inhalt1</td>
                   <td>Sub_Inhalt1</td>

          </tr>

          <tr class="table2">
                   <td>Sub_Inhalt1</td>
                   <td>Sub_Inhalt1</td>
                   <td>Sub_Inhalt1</td>
                   <td>Sub_Inhalt1</td>
                   <td>Sub_Inhalt1</td>
                   <td>Sub_Inhalt1</td>
                   <td>Sub_Inhalt1</td>
                   <td>Sub_Inhalt1</td>
                   <td>Sub_Inhalt1</td>

          </tr>

          <tr>
            <td class="inhalt">Inhalt4</td>
            <td>Inhalt5</td>
            <td>Inhalt6</td>
            <td>Inhalt5</td>
            <td>Inhalt6</td>
            <td>Inhalt5</td>
            <td>Inhalt6</td>
            <td>Inhalt5</td>
            <td>Inhalt6</td>

          </tr>
          <!--Untertabelle2-->
          <tr class="table2">
               <th>Sub_Überschrift4</th>
                  <th>Sub_Überschrift4</th>
                  <th>Sub_Überschrift4</th>
                  <th>Sub_Überschrift4</th>
                  <th>Sub_Überschrift4</th>
                  <th>Sub_Überschrift4</th>
                  <th>Sub_Überschrift4</th>
                  <th>Sub_Überschrift4</th>
                  <th>Sub_Überschrift4</th>
          </tr>
          <tr class="table2">
                  <td>Sub_Inhalt4</td>
                  <td>Sub_Inhalt4</td>
                  <td>Sub_Inhalt4</td>
                  <td>Sub_Inhalt4</td>
                  <td>Sub_Inhalt4</td>
                  <td>Sub_Inhalt4</td>
                  <td>Sub_Inhalt4</td>
                  <td>Sub_Inhalt4</td>
                  <td>Sub_Inhalt4</td>

          </tr>



       </table></dd>

         <dt id="sh_january">Headline2</dt>
         <dd>125153226262Test</dd>
       </dl>
     </article>
  </div>

What im trying to do:

When the user clicks the td Element with class inhalt the tr - elements should slideDown (until it finds tr-element, which has no class)

jQuery:

$(".inhalt").stop().click(function(){

   $(this).addClass('table2_active');
   $(this).parents().next('tr').each(function() {

        if( $(this).attr('class') === undefined) { return false;}
        else {

               $(this).slideDown(300); }


    });
});

This code just gives me the first tr, but not the other ones.

Please see the fiddle . Hope you guys get the problem. Thanks!

PS: Also the "slideDown"-Animation is not smooth - any ideas why?

//EDIT:

So basically my idea was to build a loop which goes through all tr elements DIRECTLY AFTER THE CLICKED .inhalt ITEM and check if they have class .table2, when yes, slide down, when no, break the loop.

Try with: `$(this).parent().parent().find(".table2")...` instead. Or just `$(".table2")...` if these `tr` are the only ones with this class in the page. — Arg0n, Jul 01 '16 at 08:01
`$(this).attr('class')` will return `""` and not `undefined` — Rajesh, Jul 01 '16 at 08:03
@Arg0n This slides ALL .table2 down, i just want the .table2-elements which are **directly after** the clicked .inhalt item So basically my idea was to build a loop which goes through all tr elements **DIRECTLY AFTER THE CLICKED .inhalt ITEM** and check if they have class .table2, when yes, slide down, when no, break the loop. — , Jul 01 '16 at 08:04
I'd place the rows you want inside a `` then, and select all inside that. — Arg0n, Jul 01 '16 at 08:06

score 0 · Accepted Answer · answered Jul 01 '16 at 08:10

See this updated fiddle

HTML

<div id="sh_details">
  <div class="sh_wasserzeichen"></div>
  <article>
    <dl id="sh_accordion">
      <dt id="sh_2016">Headline1</dt>
      <dd>
      <table>
        <tr>
          <th>Überschrift1</th>
          <th>Überschrift2</th>
          <th>Überschrift3</th>
          <th>Überschrift3</th>
          <th>Überschrift3</th>
          <th>Überschrift3</th>
          <th>Überschrift3</th>
          <th>Überschrift3</th>
          <th>Überschrift3</th>
        </tr>
        <tr>
          <td class="inhalt">Inhalt1</td>
          <td>Inhalt2</td>
          <td>Inhalt3</td>
          <td>Inhalt2</td>
          <td>Inhalt3</td>
          <td>Inhalt2</td>
          <td>Inhalt3</td>
          <td>Inhalt2</td>
          <td>Inhalt2</td>
        </tr>
        <tbody>
          <!--Untertabelle1-->
          <tr class="table2">
            <th>Sub_Überschrift1</th>
            <th>Sub_Überschrift1</th>
            <th>Sub_Überschrift1</th>
            <th>Sub_Überschrift1</th>
            <th>Sub_Überschrift1</th>
            <th>Sub_Überschrift1</th>
            <th>Sub_Überschrift1</th>
            <th>Sub_Überschrift1</th>
            <th>Sub_Überschrift1</th>
          </tr>
          <tr class="table2">
            <td>Sub_Inhalt1</td>
            <td>Sub_Inhalt1</td>
            <td>Sub_Inhalt1</td>
            <td>Sub_Inhalt1</td>
            <td>Sub_Inhalt1</td>
            <td>Sub_Inhalt1</td>
            <td>Sub_Inhalt1</td>
            <td>Sub_Inhalt1</td>
            <td>Sub_Inhalt1</td>
          </tr>
          <tr class="table2">
            <td>Sub_Inhalt1</td>
            <td>Sub_Inhalt1</td>
            <td>Sub_Inhalt1</td>
            <td>Sub_Inhalt1</td>
            <td>Sub_Inhalt1</td>
            <td>Sub_Inhalt1</td>
            <td>Sub_Inhalt1</td>
            <td>Sub_Inhalt1</td>
            <td>Sub_Inhalt1</td>
          </tr>
        </tbody>
        <tr>
          <td class="inhalt">Inhalt4</td>
          <td>Inhalt5</td>
          <td>Inhalt6</td>
          <td>Inhalt5</td>
          <td>Inhalt6</td>
          <td>Inhalt5</td>
          <td>Inhalt6</td>
          <td>Inhalt5</td>
          <td>Inhalt6</td>
        </tr>
        <tbody>
          <!--Untertabelle2-->
          <tr class="table2">
            <th>Sub_Überschrift4</th>
            <th>Sub_Überschrift4</th>
            <th>Sub_Überschrift4</th>
            <th>Sub_Überschrift4</th>
            <th>Sub_Überschrift4</th>
            <th>Sub_Überschrift4</th>
            <th>Sub_Überschrift4</th>
            <th>Sub_Überschrift4</th>
            <th>Sub_Überschrift4</th>
          </tr>
          <tr class="table2">
            <td>Sub_Inhalt4</td>
            <td>Sub_Inhalt4</td>
            <td>Sub_Inhalt4</td>
            <td>Sub_Inhalt4</td>
            <td>Sub_Inhalt4</td>
            <td>Sub_Inhalt4</td>
            <td>Sub_Inhalt4</td>
            <td>Sub_Inhalt4</td>
            <td>Sub_Inhalt4</td>
          </tr>
        </tbody>
      </table>
      </dd>
      <dt id="sh_january">Headline2</dt>
      <dd>125153226262</dd>
    </dl>
  </article>
</div>

JavaScript

$(this).parents().next("tbody").find(".table2").each ...

See this: http://stackoverflow.com/questions/467336/how-to-use-slidedown-or-show-function-on-a-table-row "Animations are not supported on table-rows". Wrap the content in `td` inside a `div` and use `slideDown` on that. — Arg0n, Jul 01 '16 at 08:20

score 0 · Answer 2 · answered Jul 01 '16 at 08:11

Try this :

$(".inhalt").click(function(){
   $(this).addClass('table2_active');
   $(this).parent().next('tr').each(function() {
        if($(this).hasClass('table2')) {
            $(this).slideDown(300)
        } else {
            return false;
        }
    });
});

jQuery - Get all items with a specific class, that are right after the clicked object

2 Answers2