Question

#getIt将永远是#clicked的兄弟，但是，#getIt并不真正拥有id属性，并且只有一个属于此帖子益处。

从#clicked开始，选择#getIt的最简洁方法是什么？我确信我可以使用两个next()或parent()和children()这样做，但是，想到可能只有一种方法可用。

<div>
    <table><table>
    <button id="clicked">click</button >
    <p>bla</p>
    <table id="getIt" class="myTable" data-id="123"></table>
    <p>bla</p>
</div>

Answer 1

您可以使用siblings：

$('#clicked').siblings('table.myTable')

Answer 2

如果您需要使用指定选择器的最近的下一个元素，请使用nextAll。要获得所有匹配的下一个元素中最近的元素，请添加:first伪类选择器：

$('#clicked').click(function () {
    $nearTable = $(this).nextAll('.myTable:first');
    $nearTable.css({ background: '#f00' });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <table class="myTable" data-id="123">
        <tr><td>before</td></tr>
    </table>
    <button id="clicked">click</button >
    <p>bla</p>
    <table class="myTable" data-id="123">
        <tr><td>color me</td></tr>
    </table>
    <p>bla</p>
    <table class="myTable" data-id="123">
        <tr><td>last</td></tr>
    </table>
</div>

找到给定类型的最接近的jQuery兄弟

2 个答案: