azmd108 azmd108 - 5 months ago 6
Javascript Question

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

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.

Answer

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 ...
Comments