单击一个列表项应显示与该列表项相关的表

Question

When the user selects the list item, the table associated with that list item should be displayed. I am having a brain block, I think I'm close to solving it or at least the idea on how to. Find the length of each, if the length equals one another, then create the show/click functionality. The answer should be one that can be used for hundreds of list items with different tables.

HTML

<div>
            <ul>
                <li id='one'><a href="#">number</a></li>
                <li id='two'><a href="#">othernumber</a></li>
            </ul>
        </div>
        <div>
            <table>
                <thead>
                    <tr>
                        <th>title</th><th>title</th><th>title</th><th>title</th>
                    </tr>
                </thead>
                <tbody id="table1">
                    <tr>
                        <td>blah</td>
                        <td>blah</td>
                        <td>blah</td>
                        <td>blah</td>
                    </tr>

                </tbody>
                <tbody id="table2" style="display:none">
                    <tr>
                        <td>blahTwo</td>
                        <td>blahTwo</td>
                        <td>blahTwo</td>
                        <td>blahTwo</td>
                    </tr>
                </tbody>
            </table>
        </div>

JS

function count(){
    var list = jQuery('ul li')

    var table = jQuery('table tbody')

    if(table.length == list.length){
        jQuery(list).click(function(){
            //show the table length that is equal to the list length 

        })
    }
}

jsfiddle

Answer 1

If you want to associate the list items to the tbody elements just based on their position in the list, you can make use of the .index() method in conjunction with .eq() :

 var list = jQuery('ul li a') var table = jQuery('table tbody').hide() list.click(function(e) { table.hide().eq(list.index(this)).show() }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div> <ul> <li id='one'><a href="#">number</a></li> <li id='two'><a href="#">othernumber</a></li> </ul> </div> <div> <table> <thead> <tr> <th>title</th> <th>title</th> <th>title</th> <th>title</th> </tr> </thead> <tbody id="table1"> <tr> <td>blah</td> <td>blah</td> <td>blah</td> <td>blah</td> </tr> </tbody> <tbody id="table2" style="display:none"> <tr> <td>blahTwo</td> <td>blahTwo</td> <td>blahTwo</td> <td>blahTwo</td> </tr> </tbody> </table> </div>