所以我遇到的问题是我的jQuery代码以某种方式检测到比元素中存在的更多的子代。我会尽力解释我想要做的事情。 我有一个表格，格式如下：
<table>
<!-- BEGIN SECTION: General Attributes -->
<tbody class="tableHeadings">
<tr>
<th colspan="2">
<hr />
<h3 class="tableSectionHeader">General Characteristics</h3>
<hr />
</th>
</tr>
<tr>
<th class="library-card-header" id="venue">Venue</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="pubYear">Publication Year</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="abstract">Abstract</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="author">Authors</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="url">URL</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="researchQuestions">Research Question</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="experienceDescription">Experience Description</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="whatMeasured">What Measured</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="howMeasured">How Measured</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="articleEvaluationTool">Evaluation Tool Used</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="reportType">Report Type</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="studyDesign">Study Design</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="researchApproach">Research Approach</th>
<td></td>
</tr>
</tbody>
<tbody class="tableHeadings durationHeader">
<tr>
<th colspan="2">
<hr />
<h3 class="tableSectionHeader">Duration Information</h3>
<hr />
</th>
</tr>
<tr>
<th class="library-card-header" id="years">Total Years</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="semesters">Total Semesters</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="months">Total Months</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="weeks">Total Weeks</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="days">Total Days</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="hours">Total Hours</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="minutes">Total Minutes</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="daysPerWeek">Days Per Week</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="hoursPerDay">Hours Per Day</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="minutesPerDay">Minutes Per Day</th>
<td></td>
</tr>
</tbody>
</table>
我正在做的是使用JS在数据库中存在相关信息来填充td＆＃39; s。如果我没有完全删除tr，那么它在页面上根本不显示（而不是只显示标题而没有信息）。填充部分正在无缝地工作。但是，删除没有数据的部分不仅仅适用于部分＆＃39;持续时间标题＆＃39;。
我为实现这个目的而编写的JS代码是：
jQuery("th").each(function(item){
var idAttribute = jQuery(this).attr("id");
var result = data[idAttribute];
if(result == undefined || result.length == 0) {
// Remove any element that has no data. Skip over the section headers.
if (idAttribute !== undefined)
jQuery(this).parent().remove();
return;
}
// Remove any duration information with a zero value.
if (isDurationAttr(idAttribute))
{
if (result === 0)
{
jQuery(this).parent().remove();
return;
}
}
jQuery('.tableHeadings').each(function() {
// console.log(jQuery(this).children().length);
if (jQuery(this).children().length == 1) {
jQuery(this).remove();
return;
}
});
var tree = jQuery(".durationHeader").map(function(){
return this.innerHTML;
}).get().join(", ");
console.log(tree);
});
在调试时，我尝试打印出最后一部分中的子项数，然后打印出durationHeader部分中的html。
方法
jQuery('.tableHeadings').each(function() {
// console.log(jQuery(this).children().length);
if (jQuery(this).children().length == 1) {
jQuery(this).remove();
return;
}
});
应该基本上摆脱durationHeader部分。但是，当我打印出html时，它会显示所有元素。对于一些非常奇怪的原因，这不是第一个tbody，也是一个类tableHeadings。当我在durationHeader中打印出孩子时，它表示该元素有11个孩子。它应该只有1，这是该部分的标题。
有人可以调查一下并告诉我发生了什么事吗？我现在已经坚持了2天。
答案 0 :(得分：0)
仔细查看您的第一个tbody有14个tr元素，而第二个tbody有11个。代码运行正常。告诉我，这不是你想要的。
编辑：我想我知道您不理解的内容：jQuery('.tableHeadings')包含两个元素，即带有类名.tableHeadings的两个元素。因此，当您应用each时，您没有循环遍历表部分的每个子节点，而是循环遍历每个表部分（这里有两个）。因此，访问children会获得tr个元素，而不是第一个tr的孩子：th。
jQuery('.tableHeadings').each(function() {
console.log(jQuery(this).children().length);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<!-- BEGIN SECTION: General Attributes -->
<tbody class="tableHeadings">
<tr>
<th colspan="2">
<hr />
<h3 class="tableSectionHeader">General Characteristics</h3>
<hr />
</th>
</tr>
<tr>
<th class="library-card-header" id="venue">Venue</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="pubYear">Publication Year</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="abstract">Abstract</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="author">Authors</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="url">URL</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="researchQuestions">Research Question</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="experienceDescription">Experience Description</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="whatMeasured">What Measured</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="howMeasured">How Measured</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="articleEvaluationTool">Evaluation Tool Used</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="reportType">Report Type</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="studyDesign">Study Design</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="researchApproach">Research Approach</th>
<td></td>
</tr>
</tbody>
<tbody class="tableHeadings durationHeader">
<tr>
<th colspan="2">
<hr />
<h3 class="tableSectionHeader">Duration Information</h3>
<hr />
</th>
</tr>
<tr>
<th class="library-card-header" id="years">Total Years</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="semesters">Total Semesters</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="months">Total Months</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="weeks">Total Weeks</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="days">Total Days</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="hours">Total Hours</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="minutes">Total Minutes</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="daysPerWeek">Days Per Week</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="hoursPerDay">Hours Per Day</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="minutesPerDay">Minutes Per Day</th>
<td></td>
</tr>
</tbody>
</table>