Jak znaleźć wszystkie tagi tr w pierwszym tagu o identyfikatorze „foo”?

<div class="foo">
  <tr>...</tr>
  <tr>...</tr>
  <tr>...</tr>
</div>

Próbowałem

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);
  }

Mój problem polega na tym, że nie mogę wybrać pierwszego elementu div, a następnie przeszukać go, aby znaleźć w nim wszystkie tr.

-1
Nerdromere 1 kwiecień 2020, 06:03

3 odpowiedzi

Najlepsza odpowiedź

Możesz użyć selektora od razu, aby zaznaczyć wszystkie elementy. Rozważmy następujący kod.

$(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>

Używając selektorów CSS, możesz wybrać wszystkie elementy <tr> w elemencie o identyfikatorze foo.

0
Twisty 1 kwiecień 2020, 05:01

Jak zauważyli inni, element <tr> nie powinien być elementem podrzędnym elementu <div>.

To powiedziawszy, wystarczy pobrać elementy podrzędne według typu elementu - tj.

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

Zauważ też, że <div> ma class "foo", a nie id "foo"!

Naprawdę twój HTML powinien być bardziej podobny do tego, jeśli chcesz wybrać na id.

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

Wtedy twój wybór byłby ...

$("#foo").children("tr");
0
Fraser 1 kwiecień 2020, 03:26

Spróbuj tego, jeśli wybierasz się z 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 );
});

To da ci wszystkie „tr” pod Twoim div z klasą „foo”.

Ale tak jak mówili inni, najpierw napraw kod HTML. Użyj tagu table na przykład:

<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 );
});
0
Ananthapadmanabhan 1 kwiecień 2020, 03:29