Question

鉴于一些无序列表，我需要遍历页面上的每个列表，并且只应用一个类将长度大于3的列的末尾附加一个类。我有以下内容，但它不应该应用于类到第3个列表，只有3个项目：

HTML

<div class="container">
  <div class="col-lg-3">
    <div class="toggle" tabindex="1">
      <p class="header" onclick="void(0)">LINK</p>
      <ul class="practice-areas-list">
        <li>link 1</li>
        <li>link 2</li>
        <li>link 3</li>
        <li>link 4</li>
        <li>link 5</li>
        <li>link 6</li>
      </ul>
    </div>
  </div>

  <div class="col-lg-3">
    <div class="toggle" tabindex="1">
      <p class="header" onclick="void(0)">LINK</p>
      <ul class="practice-areas-list">
        <li>link 1</li>
        <li>link 2</li>
        <li>link 3</li>
        <li>link 4</li>
        <li>link 5</li>
        <li>link 6</li>
      </ul>
    </div>
  </div>

  <div class="col-lg-3">
    <div class="toggle" tabindex="1">
      <p class="header" onclick="void(0)">LINK</p>
      <ul class="practice-areas-list">
        <li>link 1</li>
        <li>link 2</li>
        <li>link 3</li>
      </ul>
    </div>
  </div>
</div>

的jQuery

$('ul').each(function() {
  $('li:gt(2)', this).hide()
});
$('ul.practice-areas-list').each(function(){
if($('ul.practice-areas-list li').length > 3){
  $('ul').append('<li>+</li>').find('li:last').click(function() {
    $(this).siblings(':gt(2)').toggle();
  });
}
});

JSFIDDLE：LINK

Answer 1

您正在使用each，但实际上忽略了它。通过在each迭代中使用选择器，例如$('ul')或$('ul.practice-areas-list li')，您选择在整个页面上满足选择器的所有元素。

所以，考虑到这一点：

// This selects every li on the page. It evaluates to 15.
if ($('ul.practice-areas-list li').length > 3){

// Append to every ul on the page
$('ul').append( ... );

说实话，我真的不知道你想要实现的目标。您没有描述您的首选功能是什么，但是根据您所提供的内容，这是我能够管理的最佳功能：

$('ul.practice-areas-list').each(function(){
    if($(this).find('li').length > 3){
        $(this).append('<li>+</li>').find('li:last').click(function() {
            $(this).siblings(':gt(2)').toggle();
        });
    }
});

Answer 2

将.length更改为jQuery的$.size()和$('ul').append(...)更改为$(this).append(...)，以便将附加应用于所选的<ul>标记。

$('ul.practice-areas-list').each(function () {
    if ($(this).find('li').size() > 3) {
        $(this).append('<li>+</li>').find('li:last').click(function () {
            $(this).siblings(':gt(2)').toggle();
        });
    }
});

将类应用于包含3个以上项目的列表

2 个答案: