Question

我有一个列表，我正在扩展和崩溃。如果+-中的文字超过一定长度，我想要显示li。

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();
});

Answer 1

您可以在文档就绪事件中执行此操作。只需检查文本的length属性。

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

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

Here是一个工作样本

Answer 2

我可以在<li>中执行类似显示/隐藏链接的操作：

＆＃13;

$(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();
  }
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

输出：http://output.jsbin.com/lafihexura

Jquery找到li文本的长度

2 个答案: