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

Question

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

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

这是一段代码（$navigationLink/s 指的是页面中的锚链接）。

     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');                  
        } 

注意：理想情况下，要显示的上一个和下一个项目的数量应该与视口相匹配，但这可能与我在这里的情况相去甚远。

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>

Answer 2

您可以使用jQuery's index function 获取当前项目相对于其兄弟项目的索引；使用该值选择其他使用jQuery's eq function 的值，例如：

for(var i = -6;i < 7; i++)
    if(i !== 0)
        $('input').eq($('#cur').index() + i).css('color', 'red');

需要重构，但我希望能走上正轨