Question

我在另一张桌子的td里面有一张桌子。但是当我使用class检查最接近的td的长度时，我的长度为0。我的HTML和jQuery是下面的giev。

<div class="form-group col-md-12">
    <table class="table jewel_spec_table">
        <tbody>
            <tr class="jewel_type_field">
                <td class="jewel_type_td">
                    <table class="table">
                        <thead class="text-center">
                            <tr>
                                <th>Jewel Type</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>
                                    <select name="jewel_type" class="form-control jewel_type">
                                        <option value="test">Test</option>
                                        <option value="test">Test</option>
                                    </select>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </td>
                <td class="spec_table">

                    <p>Test</p>
                    <!-- We need content here -->

                </td>
                <td>
                    <div class="text-right">
                        <a class="btn-xs btn-info add_jeweltype"><i class="fa fa-plus"></i></a>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

我使用下面的脚本将一些内容添加到距离类spec_table

最近的td

$(document).on('change',".jewel_type",function(){
    $(this).closest('.spec_table').html('New content');
});

知道为什么它总是显示0？

Answer 1

closest()函数描述为：

.closest()方法在DOM树中搜索这些元素及其祖先，并从匹配元素构建一个新的jQuery对象（强调我的）

它返回一个空的NodeList，因为具有.spec_table类的元素不是$(this)的祖先。

要解决您的任务，您可以选择.jewel_spec_table对象，然后在其上创建一个选择器以获取所需的元素：

$('.jewel_spec_table').find('.spec_table')

这将为您提供所需的NodeList，然后您可以选择第一个项目。整个处理程序：

$(document).on('change',".jewel_type",function(){
    $('.jewel_spec_table').find('.spec_table')[0].html('New content');
});

Answer 2

尝试：

$(document).on('change',".jewel_type",function(){
    alert($(this).parents('.jewel_type_field').find('.spec_table').length);
});

Answer 3

您定位的元素是最近表的父级td：

的兄弟

$(this).closest('table').parent().siblings('.spec_table').length

解释：

$(this) // select element as per context
.closest('table') // get back to the table element
.parent() // now get the parent "td" of closest table
.siblings('.spec_table') // here you have to get the siblings of the parent td
.length // this results === 1

知道它为什么一直显示0

因为您试图获取使用.closest()方法无法访问的目标元素，如选择器的上下文中所示。你可以看到它被执行的时间：

$(this) // current element which is select
.closest('.spec_table') // doesn't have any parent with such class. so results === 0

Answer 4

最接近的函数作为参数：selectors, context。

在您的情况下，选择器为td，上下文为.spec_table

如果你有这张表：

<table class="spec_table">
    <tr>
        <td>123456</td>
    </tr>
</table>

使用：

$(document).on('change',".jewel_type",function(){
    alert($(this).parents().find('.spec_table td').length);
});

JSfiddle：http://jsfiddle.net/ghorg12110/2nh63fym/

使用类从另一个表中查找最近的td

4 个答案: