Little trouble with JQuery .prev method

RedBirdOBX · October 20th, 2014, 09:05 PM

On page 385, you show an example of how to use prev and parent methods to traverse the DOM. In the middle of page, you show a snippet:

alert($('#DemoTable td:contains("3")').prev()[0].innerHTML);

How exactly is this used? I cannot get his to work...a test page I created loads but nothing happens. I do in fact have a table with the ID of DemoTable and I do have a cell with "3" (1-6 sequential cells).

Code:

            <table align="center" border="1" width="500" id="DemoTable">
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>5</td>
            <td>6</td>
        </tr>
    </table>

        <script type="text/javascript">


            alert($('#DemoTable td:contains("3")').prev()[0].innerHTML);


        </script>

Thanks!

Imar · October 21st, 2014, 04:32 AM

Hi there,

prev() gets the previous sibling of the selected item. This means that it tries to get the previous sibling of the "3" cell. However, since it's the first child item of the parent row, nothing is matched.

Either use:

alert($('#DemoTable td:contains("4")').prev()[0].innerHTML);

to get the cell in the right with "contains" and then the cell on the left using prev()

or use next():

alert($('#DemoTable td:contains("3")').next()[0].innerHTML);

to get the cell on the left using using contains and then next() to get the one on the right.

Hope this helps,

Imar

RedBirdOBX · October 21st, 2014, 08:17 PM

OK, thanks for the feedback.