Question

我正在网站上工作，但我遇到了一个问题。

我有一个使用nth-child()的12x24表，我想使用jQuery来检查点击了哪个nth-child()。

目前我尝试过：

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

但我在控制台中没有得到回应。

该表格如下：

    <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>

所以我想知道是否无法检查$(this)是否可以在if语句中工作。如果不是，是否有另一种使用jQuery / Javascript if-statements检查某些nth-child()的方法？

Answer 1

您可以使用jQuery的.index()方法查找当前元素的索引，或使用jQuery的.is()方法使用CSS选择器执行检查。

$('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

我建议使用$(this).index()来获取与其兄弟姐妹相关的元素索引。

.index() Documentation

例如，检查它是否是第一个...

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

Answer 3

您的代码几乎是正确的，它不起作用，因为$(this)和$('table.masteries tr.p0 td:nth-child(1)')可能引用相同的元素，但它们是两个不同的对象。

因此检查失败，因为您正在比较对象相等性，并且您有两个不同的对象包装相同的元素，或者两个不同的对象包含两个不同的元素。

您可以尝试许多不同的事情：

使用.is()如果元素与给定的选择器匹配，则返回true（您可以传递正在使用的相同选择器或使用:first-child选择器）;
使用.index()返回与其兄弟相比较的元素索引，并检查它是否等于0;
点击Element并比较$(this).get(0) == $('table.masteries tr.p0 td:nth-child(1)').get(0)。

如果您只对p0行的点击感兴趣，则可以使用其他方法：

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

如果$（this）是nth-child（x）

3 个答案: