查找第一个外部标签内的所有标签

Question

你如何在第一个标签中找到所有 tr 标签，id 为 'foo'？

<div class="foo">

  <tr>...</tr>

  <tr>...</tr>

  <tr>...</tr>

</div>

我试过了

var rows = $("#foo").find('tr');

var rows = $("#foo")[0].find('tr'); //trying to only grab the first div or n'th one

  for(i in rows) {

     console.log(i.innerHTML);

  }

我的问题是我无法选择第一个 div，然后在该 div 中搜索以找到其中的所有 tr 。

Answer 1

您可以一次全部使用选择器来选择所有元素。考虑以下代码。$(function() {&nbsp; $("#foo tr").each(function(i, el) {&nbsp; &nbsp; $(el).attr("id", "row-" + (i + 1));&nbsp; &nbsp; console.log($(el).html().trim());&nbsp; });});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><table id="foo">&nbsp; <tr>&nbsp; &nbsp; <td>Item 1</td>&nbsp; </tr>&nbsp; <tr>&nbsp; &nbsp; <td>Item 2</td>&nbsp; </tr>&nbsp; <tr>&nbsp; &nbsp; <td>Item 3</td>&nbsp; </tr></table>使用 CSS 选择器，您可以选择<tr>元素中具有 id 的所有元素foo。

Answer 2

正如其他人指出的那样，<tr>元素不应该是元素的子<div>元素。也就是说，您只需要按元素类型获取孩子- 即$(".foo").children("tr");请注意，您<div>的class“foo”不是id“foo”！如果您想在 id 上进行选择，那么您的 HTML 应该更像这样。<table id="foo">&nbsp; <tr>...</tr>&nbsp; <tr>...</tr>&nbsp; <tr>...</tr></table>那么你的选择将是...$("#foo").children("tr");

Answer 3

试试这个，如果你要去div：<div class="foo">&nbsp; <tr>...</tr>&nbsp; <tr>...</tr>&nbsp; <tr>...</tr></div>var rows = $(".foo").find('tr');$.each( rows , function( i, l ){&nbsp; console.log( "Index #" + i + ": " + l );});这将为您的 div 下的所有 'tr' 提供类 'foo' 。但就像其他人说的，先修复html。使用如下table标签：<table id="foo">&nbsp; <tr>...</tr>&nbsp; <tr>...</tr>&nbsp; <tr>...</tr></table>var rows = $("#foo").find('tr');$.each( rows , function( i, l ){&nbsp; console.log( "Index #" + i + ": " + l );});