Question

I have the following situation.

 <ul>
      <li><span> text </span></li>
 </ul>

I use the following jquery to get the text content and width…

  $("ul li").each(function()
  {
       var textIndex = $(this).index();
       var $text = $(this).find("span").text()  // this works..
       var textWidth = $text.width(); // this does not work..
  });

How do I get the text Width along with getting its index, and text data?

Answer 1

A few things:

1. You can change your each function to include, index and value. Then you can get the index of the li without the extra jQuery call.
2. The .text() call returns the text as a string, strings do not have a .width() method on them.
3. I think what you really want is the width of the span, not the text.

Try this:

  $("ul li span").each(function(index,value)
  {
       var $value = $(value),
           textIndex = index,
           text = $value.text(),
           textWidth = $value.width();
  });