JSFiddle - React, Tailwind, and code Playground

HTML

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    </head>
    <body>
        <table>
            <thead>
                <tr>
                    <th>Whatever</th>
                </tr>
            </thead>
            <tbody>
                <tr id="foo_1">
                    <td></td>
                </tr>
                <tr style="display:none" id="foo_2">
                    <td></td>
                </tr>
                <tr style="display:none" id="foo_3">
                    <td></td>
                </tr>
                <tr style="display:none" id="foo_4">
                    <td></td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

JavaScript

alert("Without :first we get the tr list and can extract the first list element : " + $('tr[id^="foo"][style="display:none"]')[0]);
alert("With :first we get an empty list which first element is undefined : " + $('tr[id^="foo"][style="display:none"]:first')[0]);