Question

I have an xpath

//tbody[1]/tr[1]/td[3]/b[1]/a[1]

and would like a Jquery equivalent css expression following this format:

tbody:eq(0)>tr:eq(0)>td:eq(2)>b:eq(0)>a:eq(0)

I expected $("tbody:eq(0)>tr:eq(0)>td:eq(2)>b:eq(0)>a:eq(0)").length to return a match but nothing is found.

neither does $("tr:eq(0)>td:eq(2)>b:eq(0)>a:eq(0)").length or $("td:eq(2)>b:eq(0)>a:eq(0)").length returns any match.

$("b:eq(0)>a:eq(0)").length however is found.

Why does the latter work but the former starting at tr:eq(0), and td:eq(2), doesn’t work ?

Answer 1

That translation of the XPath to a jQuery selector looks fine to me, and it seems to work:

Live example

HTML:

<table>
  <tbody>
    <tr>
      <td>Zero <b>bold <a href='#'>link1</a> <a href='#'>link 2</a></b></td>
      <td>One <b>bold <a href='#'>link1</a> <a href='#'>link 2</a></b></td>
      <td>Two <b>bold <a href='#'>link1</a> <a href='#'>link 2</a></b></td>
      <td>Three <b>bold <a href='#'>link1</a> <a href='#'>link 2</a></b></td>
      <td>Four <b>bold <a href='#'>link1</a> <a href='#'>link 2</a></b></td>
      <td>Five <b>bold <a href='#'>link1</a> <a href='#'>link 2</a></b></td>
    </tr>
    <tr>
      <td>Zero <b>bold <a href='#'>link1</a> <a href='#'>link 2</a></b></td>
      <td>One <b>bold <a href='#'>link1</a> <a href='#'>link 2</a></b></td>
      <td>Two <b>bold <a href='#'>link1</a> <a href='#'>link 2</a></b></td>
      <td>Three <b>bold <a href='#'>link1</a> <a href='#'>link 2</a></b></td>
      <td>Four <b>bold <a href='#'>link1</a> <a href='#'>link 2</a></b></td>
      <td>Five <b>bold <a href='#'>link1</a> <a href='#'>link 2</a></b></td>
    </tr>
    <tr>
      <td>Zero <b>bold <a href='#'>link1</a> <a href='#'>link 2</a></b></td>
      <td>One <b>bold <a href='#'>link1</a> <a href='#'>link 2</a></b></td>
      <td>Two <b>bold <a href='#'>link1</a> <a href='#'>link 2</a></b></td>
      <td>Three <b>bold <a href='#'>link1</a> <a href='#'>link 2</a></b></td>
      <td>Four <b>bold <a href='#'>link1</a> <a href='#'>link 2</a></b></td>
      <td>Five <b>bold <a href='#'>link1</a> <a href='#'>link 2</a></b></td>
    </tr>
  </tbody>
</table>

JavaScript using jQuery:

var match = $("tbody:eq(0)>tr:eq(0)>td:eq(2)>b:eq(0)>a:eq(0)");
alert("match.length = " + match.length);
match.css({
  "color": "red",
  "border": "1px solid black"
});

I get the alert that the match length is 1 (as expected), and the resulting highlighted link looks like the right one to me.