I am still learning jQuery and the selector bit is incredibly useful, but I still don't understand it perfectly well.

I have a table with id=table1, and I want to select all td's in this table.
(really I want to wrap the text within each td with a div with overflow:hidden so I can force the cell heights to be uniform.)

What's the appropriate syntax for the jQuery (javaScript?) selector?

Any links to awesome selector tutorials are also welcome.

I am still learning jQuery and the selector bit is incredibly useful, but I still don't understand it perfectly well.

I have a table with id=table1, and I want to select all td's in this table.
(really I want to wrap the text within each td with a div with overflow:hidden so I can force the cell heights to be uniform.)

What's the appropriate syntax for the jQuery (javaScript?) selector?

Any links to awesome selector tutorials are also welcome.

• javascript
• jquery

4 Answers 4

The following should do the trick

$('#table1 td').wrapInner('<div class="no-overflow"></div>');

and add a css rule in your stylesheet

.no-overflow{
      overflow:hidden;
      /*and whatever other css properties here*/
 }

For completeness here is the documentation about

• wrapInner()
• all selectors
• the Descendant Selector jQuery('ancestor descendant') that we used in this situation

This will select all the cells:

$("#table1 td") 

jQuery uses CSS3 selectors, read about them here: http://api.jquery.com/category/selectors/

$("#table1").find("td");

$("#table1 td").each(function() {
  var text = $(this).html();
  var div = $("<div class=hiddenOverflow></div>");
  div.html(text);
  $(this).html(div);
});