JSFiddle - React, Tailwind, and code Playground

by rwaldron

HTML

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

JavaScript

console.log(
    "Without :first we get the tr list and can extract the first list element : ", 
    $('tr[id^="foo"][style="display:none"]')[0]
);


console.log(
    "With :first we get an empty list which first element is undefined : ",
    $('tr[id^="foo"][style="display:none"]:first')[0]
);


console.log(
    "Use this, for better performance, http://api.jquery.com/first-selector/",
    $('[id^="foo"][style="display:none"]').first()
);