Question

I’m trying to output all first tds in all table rows, but .html() only outputs the first, rather than all.

From the jQuery website:

Description: Get the HTML contents of the first element in the set of
matched elements.

Relevant code:

$("button").click(function() {
  var table1 = '<table><tr>';
  var data = $("#myTable tr:first-child").html();
  var table2 = '</tr></table>';
  var output = table1 + data + table2;
  $(".result").html(output);
});

When I change it to:

$("#myTable:first-child").html();

All matching elements are output, all trs, instead of just the first.

How can I output all first tds? And what does this rule of only first matched element mean? It seems only to apply sometimes…

http://jsfiddle.net/vaVe9/

Answer 1

That is how .html() works

you will need to iterate over the td you want.

var data = '';
$("#myTable tr td:first-child").each(function(){
   data+= $(this).html();
});

But you also need to keep in mind that .html() brings only the inner HTML of the selected element.

So you will need to wrap the result in a td yourself

var data = '';
$("#myTable tr td:first-child").each(function(){
   data+= '<td>' + $(this).html() + '</td>';
});

---

The documentation states

In an HTML document, .html() can be used to get the contents of any element. If the selector expression matches more than one element, only the first match will have its HTML content returned.