JQuery comparison of parents('tr) and find('tr:first') not working

Question

When a cell of the table is clicked, I want to set the content of this cell but only if it is neither in the first row nor in the first column.

$('td').click(function() {

  console.log($(this).parents('tr'));
  console.log($('#matrix').find('tr:first'));
  console.log($('#matrix').find('tr:first') == $(this).parents('tr'));

  if ($(this).parents('tr') != $('#matrix').find('tr:first')) {

    console.log("is ok");
    if ($(this).text() != "x") { // Connect
      $(this).text("x");
      alert("Connecting " +
        $('td:first', $(this).parents('tr')).text() +
        " with " +
        $('tr:first', $(this).parents('td')).text());
    } else { //Disconnect
      $(this).text("");
      alert("Disconnecting Endpoint " +
        $('td:first', $(this).parents('tr')).text() +
        " with Endpoint " +
        $('tr:first', $(this).parents('td')).text());
    };

  }; // row/columns > 0 only
}); // click()

td {
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="matrix" border="0">
  <tr>
    <td>Matrix</td>
    <td>_name_</td>
    <td>_name_</td>
  </tr>
  <tr>
    <td>_name_</td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>_name_</td>
    <td></td>
    <td></td>
  </tr>

</table>

The Firefox debuging console highlights the exact same elements, but

console.log( $(this).parents('tr') == $('#matrix').find('tr:first') );

always shows false, regardless on which cell I click.

What am I doing wrong?

Answer 1

Maybe two are pointing to the same dom element but object reference would be different. For checking the equality use is() method in jQuery.

console.log( $(this).parents('tr').is($('#matrix').find('tr:first')));

---

or compare the DOM object by getting using the index or get() method.

console.log( $(this).parents('tr')[0] == $('#matrix').find('tr:first')[0]);
// or
console.log( $(this).parents('tr').get(0) == $('#matrix').find('tr:first').get(0));

---

UPDATE : Additionally, you can reduce the code by binding click event only for the td elements which need to update the content. Where use :nth-child pseudo-class selector(pure CSS selector) to filter the td.

$('#matrix tr:nth-child(n + 2) td:nth-child(n + 2)').click(function() {
  //  use text method with callback to update text based on the existing content
  $(this).text(function(i, txt) {
    return txt === 'x' ? '' : 'x';
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="matrix" border="0">
  <tr>
    <td>Matrix</td>
    <td>_name_</td>
    <td>_name_</td>
  </tr>
  <tr>
    <td>_name_</td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>_name_</td>
    <td></td>
    <td></td>
  </tr>
</table>

Answer 2

You don't need to compare object, You can just use :gt() and :not() along with :first-child selector to exclude first row and first column.

$('#matrix tr:gt(0) td:not(:first-child)').click(function() {
  if ($(this).text() != "x") {
    $(this).text("x");
  } else {
    $(this).text("");
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="matrix" border="0">
  <tr>
    <td>Matrix</td>
    <td>_name_</td>
    <td>_name_</td>
  </tr>
  <tr>
    <td>_name_</td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>_name_</td>
    <td></td>
    <td></td>
  </tr>

</table>

Answer 3

Exclude first row and do it so much easier in the selector:

$('tr:not(:first) > :not(:first-child)').click(function() {
    //Code
});