Question

I’m trying to select a specific < td > element inside a row using jQuery’s .filter() option.

It works fine in Chrome and IE but not Firefox. Is there another way to do this that will work in all 3? Or at the very least, in Chrome and Firefox?

HTML:

<table>
    <tr id="r1">
        <td abbr='EventID'>1</td>
        <td>a</td>
    </tr>
    <tr id="r2">
        <td abbr='EventID'>2</td>
        <td>a</td>
    </tr>
    <tr id="r3">
        <td abbr='EventID'>3</td>
        <td>a</td>
    </tr>
    <tr id="r4">
        <td abbr='EventID'>4</td>
        <td>a</td>
    </tr>
</table>

Javascript:

alert($('#r1').children('td').filter('[abbr="EventID"]')[0].innerText);

Here is a fiddle of the script and markup

Answer 1

Because there is only one element it will not be in an array, so no need for the [0]. (You might want to do checks in the future to prevent errors). Also, it only seemed to work for me in Firefox with text() rather than innerText.

My final code that worked in Firefox:

alert($('#r1').children('td[abbr="EventID"]').text());

http://jsfiddle.net/3fcdH/3/