Is it possible to assign a numerical value to the prev() function or the prevUntil() function in jQuery?

Question

Is it possible to assign a numerical value to the prev() function or the prevUntil() function in jQuery?

Is there a way to apply a specific style to the six previous and six next items of a list, while giving a different style to those outside of this range using only CSS? I am currently using a functional but redundant jQuery code for this purpose. Can the prev() or prevUntil() functions be specified with a numeric value, like prev(6) or next(6)? Or should I consider using slice() instead?

Below is the jQuery code snippet I am using (where $navigationLink/s refer to anchor links on the page).

     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');
          // code for other previous and next items left out for brevity...
          $('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');                  
        }

Note: Ideally, the number of previous and next items to be styled should match the viewport, but this might be a more complex task to achieve compared to the current implementation.

jquery css list menu series

Answer 1

Answer №1

To make the code more concise, you can utilize the combination of the prevAll/nextAll function along with slice. Essentially, this allows you to target all preceding elements and then select only the first six.

Once you have grouped the elements, you can employ the addClass method with a callback to assign a class based on the index.

Below is a sample demonstration:

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

To make the code more concise, you can utilize the combination of the prevAll/nextAll function along with slice. Essentially, this allows you to target all preceding elements and then select only the first six.

Once you have grouped the elements, you can employ the addClass method with a callback to assign a class based on the index.

Below is a sample demonstration:

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 3

Answer №2

Utilize jQuery's index function to determine the position of the current element among its siblings. This information can then be used to select other elements using jQuery's eq function. Here is an example:

for(var i = -10; i < 11; i++)
    if(i !== 0)
        $('div').eq($('#current').index() + i).css('background-color', 'blue');

Some refactoring may be necessary, but this should get you started in the right direction.

Answer 4

Utilize jQuery's index function to determine the position of the current element among its siblings. This information can then be used to select other elements using jQuery's eq function. Here is an example:

for(var i = -10; i < 11; i++)
    if(i !== 0)
        $('div').eq($('#current').index() + i).css('background-color', 'blue');

Some refactoring may be necessary, but this should get you started in the right direction.

Is it possible to assign a numerical value to the prev() function or the prevUntil() function in jQuery?

Answer №1

Answer №2

Similar questions

What is the best way to customize image transparency using javascript?

Expanding image in card to fit device width using Ionic

Utilize Javascript to create a function that organizes numbers in ascending order

Issue with Bootstrap 4 navbar functionality on smaller screens

Is it possible to verify the user's authentication by confirming the presence of a JWT in their localStorage?

How do I switch between liking and unliking a post using Ajax's success response?

JavaScript - Modify the proposed content prior to inserting it into the input field

The issue with $.parseJSON when encountering double quotes

Jquery for controlling the navigation menu

Trouble encountered when utilizing jQuery for XML to HTML conversion and vice versa (CDATA mistakenly transformed into HTML comments)

Why does my jQuery map code work in version 2.0 but not in version 3.0?

What is the best way to create a CSS grid with horizontal overflow?

Jquery's remove function fails to function correctly when used on a cloned element

Customizing font sizes for individual fonts within the same font family

The functionality of JQuery's ajax post request is not functioning properly as intended

Adjust the <h1> tag's size using responsive Bootstrap design

Attempting to modify background by manipulating the state in Reactjs

Pace.js doesn't bother waiting for iframes to completely load before moving on

Having trouble with your GitHub Pages site displaying properly on desktop but working fine on mobile?

Guide to using Ajax to load a partial in Ruby on Rails