if $(this) is nth-child(x) [duplicate]

Question

I am working on a website and I've ran into a problem.

I have a 12x24 table using nth-child() and I want to use jQuery to check which nth-child() is being clicked.

Currently I have tried:

$('table.masteries tr.p0 td').click(function() {
    if($(this) == $('table.masteries tr.p0 td:nth-child(1)')) {
        console.log('true')
    }
});

But I get no response in the console.

The table is layed out as follows:

    <table class="masteries">
        <tr class="p0">
            <td></td>
...
        </tr>
        <tr class="p4">
            <td></td>
...
        </tr>
        <tr class="p8">
            <td></td>
...
        </tr>
        <tr class="p12">
            <td></td>
...
        </tr>
        <tr class="p16">
            <td></td>
...
        </tr>
        <tr class="p20">
            <td></td>
...
        </tr>
    <table>

So I wondered if it wasn't possible to check if $(this) can work in if-statements or not. If it isn't, is there another way of checking for certain nth-child() with jQuery/Javascript if-statements?

Answer 1

You can use jQuery's .index() method to find what index the current element has, or use jQuery's .is() method to perform a check using CSS selectors.

$('table.masteries tr.p0 td').click(function() {
    var $this = $(this);
    // You don't need to use these together, both should work independently
    if ($this.index() === 0 || $this.is(':nth-child(1)')) {
        console.log('true')
    }
});

Answer 2

I suggest using $(this).index() to get the index of the element in relation to it's siblings.

.index() Documentation

For example to check if it's the first one...

$('table.masteries tr.p0 td').click(function() {
    if($(this).index() == 0) {
        console.log('true')
    }
});