Jquery find length of li text

Question

I have a list that I am expanding and collapsing. What I want to do is only show the +- if the text in the li is over a certain length.

function prepareList() {
  $('.package_caption').find('ul').find('li')
        .click( function(event) {
        if (this == event.target) {
            $(this).toggleClass('expanded');
            $(this).children('ul').toggle('medium');
        }
        return false;
    })
    .addClass('collapsed')
        .children('ul').hide();
};
  $(document).ready( function() {
      prepareList();
});

Can you include some html? Do you mean length in number of characters or length as in pixels? — Joshua Morgan, Dec 15 '15 at 22:45
@Locke125 I am trying to find length in the number of characters. You can see it live here: http://test.fmanet.org/membership/test-benefits-chart/ — Johanna, Dec 16 '15 at 15:44
@Mi-Creativity thank you, that helps me immediately see the length so I know what value to set for max. :) — Johanna, Dec 16 '15 at 16:17
@Johanna, You welcome and I'm glad it helped you, enjoy coding — Mi-Creativity, Dec 16 '15 at 19:02

score 0 · Accepted Answer · answered Dec 15 '15 at 22:51

0

You can execute this in the document ready event. Simply checking the length property of the text.

var limit = 5; 
var lis=$('.package_caption').find('ul').find('li');
$.each(lis,function(ind,item){

   if($(this).text().length>limit)
   {          
       $(this).text("+");
   }
});

Here is a working sample

answered Dec 15 '15 at 22:51

Shyju

214,206
104
411
497

I'm playing with the code now. Not working but I'm tweaking it. – Johanna Dec 16 '15 at 15:03
What is not working ?did yo see the sample i posted ? – Shyju Dec 16 '15 at 15:58
I'm a noob so much at times it hurts. I am testing, still don't have it, but wrapping the IF block around the prepareList(); in the document ready function. Can be viewed here http://test.fmanet.org/membership/test-benefits-chart/ – Johanna Dec 16 '15 at 16:26

score 0 · Answer 2 · answered Dec 15 '15 at 23:50

0

I can do something like a Show / Hide link in <li>:

$(function () {
  if ($("ul").children().length > 5) {
    $("ul li:nth-child(5)").after('<li id="show-more">Show / Hide</li>');
    $("#show-more").click(function () {
      $this = $(this);
      $(this).nextAll().fadeToggle(function () {
        $this.text(function () {
          return ($this.next().is(":visible") ? "Hide" : "Show");
        });
      });
    }).html("Show").nextAll().fadeOut();
  }
});

#show-more {border: 1px solid #99f; list-style: none; cursor: pointer; padding: 3px; display: inline-block; line-height: 1; border-radius: 3px;}

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li>Item 8</li>
  <li>Item 9</li>
  <li>Item 10</li>
  <li>Item 11</li>
  <li>Item 12</li>
  <li>Item 13</li>
  <li>Item 14</li>
  <li>Item 15</li>
</ul>

Output: http://output.jsbin.com/lafihexura

answered Dec 15 '15 at 23:50

Praveen Kumar Purushothaman

164,888
24
203
252

That code is beautiful. But right now I am trying to check the length of each individual (li) tag. I need the + sign from my style to show only if it is going to wrap to a second line. My test page is here http://test.fmanet.org/membership/test-benefits-chart/ – Johanna Dec 16 '15 at 16:14
Ah... @Johanna I have a different approach for you. Did you think about `text-overflow: ellipsis`? – Praveen Kumar Purushothaman Dec 16 '15 at 16:15
That is a nice approach, I am checking it out now. – Johanna Dec 16 '15 at 16:42
I am trying this but it cuts it off and puts a box around it. Nice but I need it to be able to wrap to two lines by clicking on a 'more' or plus sign if too long – Johanna Dec 16 '15 at 16:51

Jquery find length of li text

2 Answers2