Найти все теги в первом внешнем теге

Question

Как найти все теги tr в первом теге с идентификатором '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

Попробуйте, если вы собираетесь с 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 );
});

Это даст вам все 'tr' под вашим div с классом '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 );
});

Answer 2

Вы можете использовать селектор все сразу, чтобы выбрать все элементы. Рассмотрим следующий код.

$(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> в элементе с идентификатором foo.

Answer 3

Как уже отмечали другие, элемент <tr> не должен быть дочерним по отношению к элементу <div>.

Тем не менее, вам просто нужно получить children по типу элемента - т.е.

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

Обратите внимание, что у вашего <div> есть class "foo" не id "foo"!

На самом деле ваш HTML должен быть больше похож на это, если вы хотите выбрать по идентификатору.

<table id="foo">
  <tr>...</tr>
  <tr>...</tr>
  <tr>...</tr>
</table>

Тогда ваш выбор будет ...

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