if $(this) is nth-child(x)

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?

this is definitely not a duplicate of the aforementioned question. The answer might be the same but this problem has more specific problem. I find this more useful. — swdmnd, Jan 25 '21 at 10:00

SeinopSys · Accepted Answer · 2014-08-12T14:43:16.977

15

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')
    }
});

edited Aug 12 '14 at 14:43

answered Aug 12 '14 at 14:38

SeinopSys

8,787
10
62
110

2

You can just do `.is(':nth-child(1)')` instead - no need to repeat the rest of the selector or pass a jQuery set. – BoltClock Aug 12 '14 at 14:39
@BoltClock - good point! Thanks DJDavid – SaiyanToaster Aug 12 '14 at 14:40
If the *click* is not not needed on the other elements, I would even suggest to include the extra criteria in the initial selector. E.g.: `$('table.masteries tr.p0 td:first-child').click(...`) – Yoshi Aug 12 '14 at 14:46

score 1 · Answer 2 · answered Aug 12 '14 at 14:44

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')
    }
});

Alessandro Vendruscolo · Answer 3 · 2014-08-12T14:51:52.677

Your code is almost right, it doesn't work because $(this) and $('table.masteries tr.p0 td:nth-child(1)') might refer to the same element, but are two different objects.

So the check fails, because you're comparing for object equality, and you've got two different objects that wrap the same element, or two different objects that wrap two different elements.

You can try many different things:

Use .is() which returns true if the elements matches a given selector (you can pass the same selector you were using or use the :first-child selector);
Use .index() which returns the index of the element compared to its sibling and check that it's equal to 0;
get the clicked Element and compare that $(this).get(0) == $('table.masteries tr.p0 td:nth-child(1)').get(0).

Or you can use a different approach, if you're only interested in clicks to the p0 row:

$('table.masteries tr.p0').click(function() {
    // clicked p0 row or any of its children
});

if $(this) is nth-child(x)

3 Answers3