Question

我有这个数据结构，想要更改我的ul。

中所有列表项的内容

<ul class="comments-holder">
  <li class="single-comment-holder">
    <div class="comment-body">
      <div class="comment-text">
        Some Text
      </div>
    </div>
  </li>
  <li class="single-comment-holder">
    <div class="comment-body">
      <div class="comment-text">
        Some Text
      </div>
    </div>
  </li>
</ul>

我知道jQuery中有each（）命令，但我不确定如何在我的上下文中使用它。我正在使用一个脚本，如果它们太长则会缩短我的文本并添加一个show more按钮来扩展文本。我的例子是这样的：

<div class="comment">
  This is a long comment text. 
  This is a long comment text. 
  This is a long comment text. 
  This is a long comment text.
</div>
<script type="text/javascript">
  $(document).ready(function() {
    $(".comment").shorten();
  });
</script>

我现在的问题是每项工作究竟如何？我想过像这样使用它： $(".ul.comments-holder .li.single-comment-holder .comment-body .comment-text").each(shorten(););但它根本不起作用。我找到的每个用法都以...each(function(){})的形式使用，所以甚至可以像我需要的那样使用它吗？

Answer 1

缩短是一个插件，所以你需要调用jQuery包装器对象，你的选择器也搞砸了，因为你使用了类选择器而不是像.ul那样的元素选择器而不是ul

$("ul.comments-holder li.single-comment-holder .comment-body .comment-text").shorten()

Answer 2

怎么样

$("li div.comment-text").each(function() {$(this).shorten()})

Answer 3

删除选择器中的额外.，然后重试：

$("ul.comments-holder li.single-comment-holder .comment-body .comment-text").each(function () {
    $(this).shorten();
});

或更短的版本，如

$(".comment-text").each(function () {
    $(this).shorten();
});

或者就像

一样

$(".comment-text").shorten();

Answer 4

我可能在这里遗漏了一些东西，但是你的函数是一个jQuery对象的方法并不清楚。

我正在使用一个脚本，如果它们太长就会缩短我的文本

如果你的脚本扩展了$ .fn，那么palass的上述答案很棒。如果它只是一个函数，请以这种方式传递：

$(function(){
  $("div.comment-text").each(shorten);
});

jQuery选择所有列表项

4 个答案: