jquery - 有没有办法给 prev() -- 或 prevUntil()-- 一个数值？

Question

我想将列表的前六个元素和后六个元素应用与当前元素相同的样式，并将不同的样式应用于其他元素——那些超出这个 -6/+6 范围的元素。 (纯 css 可以为接下来的六个做，但我没能 catch 前面的 6 个；+ 我希望在元素不在范围内时删除该类。)

到目前为止，我有一段功能性但冗余的 jquery 代码。有没有办法用数值指定 prev() 或 prevUntil() 函数？像 prev(6)/next(6) 这样的东西？或者我应该使用 slice() 吗？

这是一段代码($navigationLink/s 指的是页面中的 anchor 链接)。

     if (!$navigationLink.parent().hasClass('sub-menu-current')) {
          $navigationLinks.parent().removeClass('sub-menu-current');
          $navigationLink.parent().addClass('sub-menu-current');
          $('li').removeClass('sub-menu-previous-1');
          $navigationLink.parent().prev().addClass('sub-menu-previous-1');
          $('li').removeClass('sub-menu-next-1');
          $navigationLink.parent().next().addClass('sub-menu-next-1'); 
          $('li').removeClass('sub-menu-previous-2');
          $navigationLink.parent().prev().prev().addClass('sub-menu-previous-2');
          $('li').removeClass('sub-menu-next-2');
          $navigationLink.parent().next().next().addClass('sub-menu-next-2');  
          $('li').removeClass('sub-menu-previous-3');
          $navigationLink.parent().prev().prev().prev().addClass('sub-menu-previous-3');
          $('li').removeClass('sub-menu-next-3');
          $navigationLink.parent().next().next().next().addClass('sub-menu-next-3');
          $('li').removeClass('sub-menu-previous-4');
   $navigationLink.parent().prev().prev().prev().prev().addClass('sub-menu-previous-4');
   $('li').removeClass('sub-menu-next-4');  
   $navigationLink.parent().next().next().next().next().addClass('sub-menu-next-4'); 
   $('li').removeClass('sub-menu-previous-5'); 
   $navigationLink.parent().prev().prev().prev().prev().prev().addClass('sub-menu-previous-5');
   $('li').removeClass('sub-menu-next-5'); $navigationLink.parent().next().next().next().next().next().addClass('sub-menu-next-5');      
            $('li').removeClass('sub-menu-previous-6');
            $navigationLink.parent().prev().prev().prev().prev().prev().prev().addClass('sub-menu-previous-6');
            $('li').removeClass('sub-menu-next-6');
            $navigationLink.parent().next().next().next().next().next().next().addClass('sub-menu-next-6');                  
        } 

注意:理想情况下，要显示的上一个和下一个元素的数量应该与视口(viewport)相匹配，但这可能与我这里的数量相去甚远。

Answer 1

如果将prevAll/nextAll 函数与slice 结合使用，可以缩短代码。换句话说，您选择了所有前面的元素，并且只选择了第一个六分之一。

分组后，您可以使用带有回调的addClass 来添加基于索引的类。

这是一个例子:

let $test_span = $( 'span' ).eq( 16 ).addClass( 'current' );

$test_span.parent().prevAll().slice( 0, 6 ).addClass( i => `previous-class-${i + 1}` );

$test_span.parent().nextAll().slice( 0, 6 ).addClass( i => `next-class-${i + 1}` );

.current{ color:green; }
[class^="previous"]{ color : red }
[class^="next"]{ color : blue }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><span>1</span></div>
<div><span>2</span></div>
<div><span>3</span></div>
<div><span>4</span></div>
<div><span>5</span></div>
<div><span>6</span></div>
<div><span>7</span></div>
<div><span>8</span></div>
<div><span>9</span></div>
<div><span>10</span></div>
<div><span>11</span></div>
<div><span>12</span></div>
<div><span>13</span></div>
<div><span>14</span></div>
<div><span>15</span></div>
<div><span>16</span></div>
<div><span>17</span></div>
<div><span>18</span></div>
<div><span>19</span></div>
<div><span>20</span></div>
<div><span>21</span></div>
<div><span>22</span></div>
<div><span>23</span></div>
<div><span>24</span></div>
<div><span>25</span></div>
<div><span>26</span></div>
<div><span>27</span></div>
<div><span>28</span></div>
<div><span>29</span></div>
<div><span>30</span></div>
<div><span>31</span></div>
<div><span>32</span></div>
<div><span>33</span></div>
<div><span>34</span></div>
<div><span>35</span></div>
<div><span>36</span></div>
<div><span>37</span></div>
<div><span>38</span></div>
<div><span>39</span></div>
<div><span>40</span></div>