Question

I’m trying to select the H2 that contains the most characters, or is the widest in width, whichever one is simpler, or if you know how to do it could you put both? I’m not sure of the syntax.

Answer 1

To get the pixel-widest, you could just loop though kind of abusing the .width() function, for example:

var cw = 0, widest;
$("h2").width(function(i, w) { if(w > cw) {widest = this; cw = w;} return w; });
//widest == widest h2 element
//$(widest).addClass("widest");

You can test it out here. Inside this function w is the current width, so we’re just seeing if it’s wider than our current widest, and if so setting the current width to the new widest and widest to the current <h2> that was found to be wider than the previous widest.

You can do something similar for character count using .text():

var cw = 0, widest;
$("h2").text(function(i, t) { if(t.length > cw) {widest = this; cw = t.length;} return t; });
$(widest).addClass("widest");​

You can test that version here.