jQuery 查找下一个表

Question

我的页面有一个搜索表单和一个加载结果的表格。我正在尝试使用 jQuery 来定位表的下一个实例，但由于某种原因我找不到它。

<div class="search">
  <form class="search" method="get" action="/page.php">
    <input id="search" type="text" value="" name="search">
    <input type="submit" value="search">
  </form>
</div>

<table id="Organization" class="table" width="100%" >
...table stuff...
</table>

使用 jQuery，我尝试“单击”搜索按钮，我尝试获取表的下一个实例并获取该表的类。我已经尝试过这个，但它不起作用:

$(this).next('table').attr('class'); 

有人可以帮我在单击表单上的搜索按钮后选择表格的下一个实例吗？

Answer 1

jQuery Documentation for next()说:

Given a jQuery object that represents a set of DOM elements, the .next() method allows us to search through the immediately following sibling of these elements in the DOM tree and construct a new jQuery object from the matching elements.

这意味着使用 next 您只能找到紧随所选元素的同一级别的元素。据此，以下内容应该有效:

$(".search").next("table").attr('class');

如果您有多个具有 search 类的元素，您可以使用 $.parents 方法在祖先中查找 search div 并然后查找下一个表。

$(this).parents(".search").next("table").attr('class');

但是为什么要使用 next() 呢？您可以选择表格，例如通过它的类或通过 ID(如果您为其指定一个 ID)。

修改后的表(通过属性id扩展)将是:

<table id="the_table" class="table">...</table>

选择表格的方法:

$(".table").attr('class'); // by class
$("#the_table").attr('class'); // by id