Jquery filter returned select

Question

I am a beginner with jquery. I want to show only the first 5 rows of tables with the class filter. I tried the beneath statement but it doesn't work.

$('.filter').('tr').slide(5).hide()

When is use $('.filter tr').slice(5).hide() he shows only the first five TR's of the first table on the page. What is the best way to archive this?

Answer 1

Or you can use :nth-child selector with a proper equation [Docs][1].

$('.filter tr:nth-child(n+6)').hide()

table {
    border: 1px solid black;
    margin-bottom: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="filter">
    <tr>
        <td>1</td>
    </tr>
    <tr>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
    </tr>
    <tr>
        <td>5</td>
    </tr>
    <tr>
        <td>6</td>
    </tr>
    <tr>
        <td>7</td>
    </tr>
</table>

<table class="filter">
    <tr>
        <td>1</td>
    </tr>
    <tr>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
    </tr>
    <tr>
        <td>5</td>
    </tr>
    <tr>
        <td>6</td>
    </tr>
    <tr>
        <td>7</td>
    </tr>
</table>

<table class="filter">
    <tr>
        <td>1</td>
    </tr>
    <tr>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
    </tr>
    <tr>
        <td>5</td>
    </tr>
    <tr>
        <td>6</td>
    </tr>
    <tr>
        <td>7</td>
    </tr>
</table>

<table class="filter">
    <tr>
        <td>1</td>
    </tr>
    <tr>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
    </tr>
    <tr>
        <td>5</td>
    </tr>
    <tr>
        <td>6</td>
    </tr>
    <tr>
        <td>7</td>
    </tr>
</table>

[1]: http://api.jquery.com/nth-child-selector/

$('.filter tr:nth-child(n+6)').hide()

Answer 2

Just iterate the list:

$('.filter').each(function() { $(this).find('tr').slice(5).hide(); });