Question

I have a website that includes the following markup (shortened somewhat):

<tr data-trackingid="I129102">
  <td><input type="checkbox" class="ActionProduct" data-trackingid="I129102"></td>
  <td><input type="text" value="Estimated 2 drinks"></td>
  <td><input type="text" value="1"></td>
  <td><input type="text" value="1"></td>
  <td><span>1</span></td>
  <td><span>Person</span></td>
  <td><input type="text" value="17.49"></td>
  <td><input type="text" value="17.49"></td>
  <td><input type="text" value="0"></td>
  <td><input type="text" value="17.49"></td>
  <td><input type="text" value="17.49"></td>
  <td><span>12.40</span></td>
  <td><input type="text" value="12.40"></td>
  <td><input type="text" value="0"></td>
  <td><input type="text" value="12.40"></td>
  <td><input type="text" value="12.40"></td>
  <td><input type="text" value="41.03"></td>
  <td><input type="text" value="5.09"></td>
  <td><span style="display: none;"></span></td>
  <td><input type="text" value=""></td>
</tr>

When I load the page into Google Chrome and type the following command in the Console window:

$('tr[data-trackingid]="I129102"')

I’m expecting it to return a single element (the table row with the attribute data-trackingid="I129102"). But instead it returns a collection of 117 elements, which all appear to be rows (<tr>).

The text “I129102” appears twice in the entire markup and both times are in the HTML I posted above. Why is it returning so many results.

Note: I’ve published this HTML in a JS Bin Project but I get a syntax error if I try and type jQuery in the Console window on that page.

Answer 1

Your selector is invalid, i’m surprised it’s selecting anything. try this:

$('tr[data-trackingid="I129102"]')