Question

我目前使用以下代码从第一个表的第一列读取数据：

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

现在，我需要使用位于.confluenceTable ID后面的#showdata的第一个表格。我该怎么办？

我试过像

这样的东西

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。

第一个代码段是因为表格是INSIDE <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>

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

1 个答案: