Question

I have links that load dynamically onto a background to make them look like buttons. Some of the links take up two lines and some of the links take up 1 line. Eithe way they need to be vertically centered.

My plan to to append a class based on the number of characters and then adjust the padding from there.

So if the link’s text is 25 characters (including spaces) or less – append class ‘small’

if the link’s text is greater than 25 characters – append class ‘large’

How would I go about doing this with jQuery?

Answer 1

You could do this:

$(function() {
  $("#backgroundID a").each(function() {
    $(this).addClass($(this).text().length > 25 ? "large" : "small");
  });
});

If you wanted all links, just change the selector to $("a"). You mentioned dynamic loading but not exactly what dynamic meant…if you’re loading via ajax, for example $.ajax(), you could do this:

$.ajax({
  //options...
  success: function(data) {
    //do stuff with links
    $("a", data).each(function() {
      $(this).addClass($(this).text().length > 25 ? "large" : "small");
    });
  }
});