Question

我想应用与当前项目相同的样式的列表中的前六个和下六个项目，以及与其他项目不同的样式 - 超出此-6 / + 6范围。（纯css可以在接下来的六个中做，但我没有设法赶上前面的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');

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

有没有办法给prev（） - 或prevUntil（） - 一个数值？

2 个答案: