代码之家 › 专栏 › 技术社区 › Arntjine

有没有办法给prev()--或previntil()--一个数值?

series menu list css jquery

Arntjine · 技术社区 · 7 年前

我想将列表中的前六项和后六项应用于与当前项相同的样式,并将不同的样式应用于其他项,即不在-6/+6范围内的项。(纯css下一步可以处理6个,但我没有捕捉到前6个;+我希望在项目不在范围内时删除该类。)

到目前为止,我有一段功能性但冗余的jquery代码。有没有办法用数值指定prev()或prevUntil()函数?比如说上一个(6)/下一个(6)?还是应该使用slice()?

下面是一段代码(navigationLink指页面中的锚定链接)。

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

注意:理想情况下,要显示的上一个和下一个项目的数量应该与视口匹配,但这可能与我这里的内容相差太远。

2 回复 | 直到 7 年前

Karl-André Gagnon 7 年前

如果使用 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>

Scaramouche 7 年前

您可以使用 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');

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