如何在特定按钮之后找到特定样式的下一个元素

Question

i当前使用以下代码从第一列的第一列读取数据：

jQuery(".confluenceTable tr:gt(0) td:nth-child(1)").each(function() {
   projects_list.push(jQuery(this).text().trim());
});

现在，我需要使用带有#showdata ID的按钮后的.confluenceTable的第一表。我应该怎么做？

我尝试了

之类的东西

jQuery("#showdata").nextAll(".confluenceTable tr:gt(0) td:nth-child(1)").each(function() {

，但它没有返回。

HTML看起来像

<button name="showdata" id="showdata" type="button"><p>show data</p></button> 
<p>some text</p>
<div class="table-wrap">
<table class="wrapped relative-table confluenceTable" style="width: 99.94%;">

Answer 1

首先，在发布与DOM查询和操纵密切相关的问题时，请包括结构良好的代码，您不应该让人们跳跃不必要的障碍来帮助您。

至于手头的问题，缺少的主要因素是 :first。

第一个片段是如果表将在<div class="table-wrap"></div>内，则是第二个片段。

var res = $('#showdata').nextAll('.table-wrap:first').children('.confluenceTable');
var projects_list=[];
res.find("tr:gt(0) td:nth-child(1)").each(function() {
   projects_list.push(jQuery(this).text().trim());
});
console.log(projects_list);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button name="showdata" id="showdata" type="button"><p>show data</p></button> 
<p>some text</p>
<div class="table-wrap">
<table class="wrapped relative-table confluenceTable" style="width: 99.94%;">
<thead><tr><th>header1</th><th>header2</th></tr></thead>
<tbody><tr><td>cell1</td><td>cell2</td></tr>
<tr><td>cell3</td><td>cell4</td></tr>
<tr><td>cell5</td><td>cell6</td></tr></tbody>
</table>
</div>

var res = $('#showdata').nextAll('.confluenceTable:first');
var projects_list=[];
res.find("tr:gt(0) td:nth-child(1)").each(function() {
   projects_list.push(jQuery(this).text().trim());
});
console.log(projects_list);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button name="showdata" id="showdata" type="button"><p>show data</p></button> 
<p>some text</p>
<div class="table-wrap">
</div>
<table class="wrapped relative-table confluenceTable" style="width: 99.94%;">
<thead><tr><th>header1</th><th>header2</th></tr></thead>
<tbody><tr><td>cell1</td><td>cell2</td></tr>
<tr><td>cell3</td><td>cell4</td></tr>
<tr><td>cell5</td><td>cell6</td></tr></tbody>
</table>