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

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() {

  $("#foo tr").each(function(i, el) {

    $(el).attr("id", "row-" + (i + 1));

    console.log($(el).html().trim());

  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id="foo">

  <tr>

    <td>Item 1</td>

  </tr>

  <tr>

    <td>Item 2</td>

  </tr>

  <tr>

    <td>Item 3</td>

  </tr>

</table>

使用 CSS 选择器，您可以选择<tr>元素中具有 id 的所有元素foo。

Answer 2

正如其他人指出的那样，<tr>元素不应该是元素的子<div>元素。

也就是说，您只需要按元素类型获取孩子- 即

$(".foo").children("tr");

请注意，您<div>的class“foo”不是id“foo”！

如果您想在 id 上进行选择，那么您的 HTML 应该更像这样。

<table id="foo">

  <tr>...</tr>

  <tr>...</tr>

  <tr>...</tr>

</table>

那么你的选择将是...

$("#foo").children("tr");

Answer 3

试试这个，如果你要去div：

<div class="foo">

  <tr>...</tr>

  <tr>...</tr>

  <tr>...</tr>

</div>

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

$.each( rows , function( i, l ){

  console.log( "Index #" + i + ": " + l );

});

这将为您的 div 下的所有 'tr' 提供类 'foo' 。

但就像其他人说的，先修复html。使用如下table标签：

<table id="foo">

  <tr>...</tr>

  <tr>...</tr>

  <tr>...</tr>

</table>

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

$.each( rows , function( i, l ){

  console.log( "Index #" + i + ": " + l );

});