Question

我将多个li收集到一个对象中进行分页。

var li = $(this).find('li');
if(li.length > 15) {
    var activeId = li.filter('.active').index();
    li.eq(0)
        .add(li.eq(1))
        .add(li.eq(2))
        .add(li.eq(-1))
        .add(li.eq(-2))
        .add(li.eq(-3))
        .add(li.eq(activeId))
        .add(li.eq(activeId-1))
        .add(li.eq(activeId-2))
        .add(li.eq(activeId-3))
        .add(li.eq(activeId+1))
        .add(li.eq(activeId+2))
        .add(li.eq(activeId+3))
        .addClass('dosomething');
    li.each(function() {
        // do something...
    });
}

HTML示例：

<ul>
    <li><a href="#…">1</a></li>
    <li class="active"><a href="#…">2</a></li>
    <li><a href="#…">3</a></li>
    <li><a href="#…">4</a></li>
    <li><a href="#…">5</a></li>
    ...
    <li><a href="#…">16</a></li>
</ul>

但这看起来很直接，而且性能和可读性都不高。所以我正在寻找一种方法来编写这个代码更具可读性。

Answer 1

要将jQuery数组集合减少为特定的起始端索引元素集 - 您可以使用Array.prototype.slice(beginIndex, endIndex(not inclusive))

＆＃13;

$("ul").each(function() {

  var $li = $(this).find('li'),
      tot = $li.length;

  if (tot > 15) {

    var idx  = $li.filter('.active').index(),
        first3   = $li.slice(0, 3),                                         // Slice
        middle7  = $li.slice(Math.max(0, idx - 3), Math.min(tot, idx + 4)), // Slice
        last3    = $li.slice(tot - 3, tot),                                 // Slice
        $group   = first3.add( middle7 ).add( last3 );                 // Group them

    $group.addClass("dosomething").each(function() {
       // do something on that group of LI elements
    });

  }

});

＆＃13;

li.active {
  color: red;
}

.dosomething {
  color: blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li class="active">8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
  <li>14</li>
  <li>15</li>
  <li>16</li>
  <li>17</li>
  <li>18</li>
</ul>

＆＃13;

P.S：如果您需要定位不属于我们$group的LI，您可以这样做：

var $allOther = $li.not( $group );

使用.eq的多个.add更好的可读性

1 个答案: