爲多個.add提供更好的可讀性，其中包含.eq

我將多個li收集到一個對象中進行分頁。爲多個.add提供更好的可讀性，其中包含.eq

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>

但是，這看起來很簡單的，而不是非常高性能和可讀性。所以我正在尋找一種方法來編寫更具可讀性的代碼。

來源

2017-05-06 Coli

您添加的HTML並不能解釋太多 - 總體上您的問題還不清楚，請嘗試添加更多關於您實際上的內容的詳細信息。 –

我只需要它們在一個對象中，以不同的方式顯示它們。我不能改變下面的代碼，我只能改變li對象的收集。 – Coli

：D好的，但你能解釋一下你需要收集的所有元素嗎？哪些和哪些你不需要收集。 –

爲了減少您的jQuery的數組集合到一個特定的啓動式指數元素的集合 - 你可以使用Array.prototype.slice(beginIndex, endIndex(not inclusive))

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

 
    } 
 

 
});

li.active { 
 
    color: red; 
 
} 
 

 
.dosomething { 
 
    color: blue; 
 
}

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

PS：如果在任何時候你需要的目標LI不在我們的$group中，您可以簡單地做：

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

來源

2017-05-06 09:19:25

爲多個.add提供更好的可讀性，其中包含.eq

回答

相關問題