使用 class 从另一个 table 中找到最近的 td

Question

我在另一个 table 的 td 中有一个 table。但是当我使用 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>

我使用下面的脚本将一些内容添加到最近的 td class spec_table

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

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

Answer 1

closest()函数描述为：

the .closest() method searches through these elements and their ancestors in the DOM tree and constructs a new jQuery object from the matching elements (emphasis mine)

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

要解决您的任务，您可以 select .jewel_spec_table 对象，然后在其上创建 selector 以获得所需的元素：

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

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

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

Answer 2

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

在您的例子中，选择器是 td，上下文是 .spec_table

如果你有这个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/

Answer 3

尝试：

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

Answer 4

您定位的元素是最近 table 的父元素 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

使用 class 从另一个 table 中找到最近的 td

Find closest td from another table using class

jquery

parent

closest