Using jQuery .nextUntil() on split lists

dotmartin

Is it possible to get the .nextUntil() to work on split lists, or get the same functionality?


So I am trying to implement the ever so popular shift select for my items, and since they are ordered in a list in my application I want to be able to select across <ul> borders.

I have the following set of DOM elements:

<ul class="current">
  <li class="item">first</li>
  <li class="item clicked">second</li>
  <li class="item">third</li>
  <li class="item">fourth</li>
</ul>
<ul class="later">
  <li class="item">fifth</li>
  <li class="item selected">sixth</li>
  <li class="item">seventh</li>
</ul>

And using something like this:

$('li.clicked').nextUntil('li.selected');

I'd like a list containing the following elements

[ <li class="item">third</li>,
  <li class="item">fourth</li>,
  <li class="item">fifth</li> ]

However all I get is the elements leading up to the split </ul>. Is there any way of doing this? I have also tried to first selecting all items with $('.item')and then using .nextUntil() on them without any luck.

Jose Rocha

Is this what you are looking for?

$('li').slice($('li').index($('.clicked'))+1,$('li').index($('.selected')));

For reference

Jquery.Index

Jquery.Slice

Edit

So if you do

$('li')

you will get an array of all elements 'li' getting:

[<li class=​"item">​first​</li>​, 
<li class=​"item clicked">​second​</li>​, 
<li class=​"item">​third​</li>​, 
<li class=​"item">​fourth​</li>​, 
<li class=​"item">​fifth​</li>​, 
<li class=​"item selected">​sixth​</li>​, 
<li class=​"item">​seventh​</li>​]

Since it is an array you can slice him to get an sub array you just need two positions, where to start and here to finish.

//start
$('li').index($('.clicked'))+1 // +1 because you dont want to select him self
//end
$('li').index($('.selected'))

For better preformance you should before create an array with all li so it will not search all dom 3 times for the array of 'li'

var array = $('li');
var subarray = array.slice(array.index($('.clicked'))+1,array.index($('.selected')));

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

jQuery, nextUntil(), if element is not a paragraph

From Dev

jQuery: Wrap elements with nextUntil()

From Dev

Get immediate child using nextUntil

From Dev

Using JQuery nextUntil to removeClass from all divs except the last in multiple sets

From Dev

jQuery split and regroup list by <i> into new lists

From Dev

Using jQuery to split a div

From Dev

Hide on click Angular JS - jQuery nextUntil() functionality

From Dev

Jquery Next/NextAll/NextUntil with count limit

From Dev

Split a string by integer in it using jquery

From Dev

how to split this string using jquery?

From Dev

Split list in multiple small lists after input value is set - Jquery

From Dev

jQuery : Split the DOM Node using jQuery

From Dev

jQuery $(this).nextUntil('h3').toggle(); - hidden ul inside an ul

From Java

Split list of objects into multiple lists of fields values using Java streams

From Dev

Split list of objects into multiple lists of fields values using Java streams

From Dev

Using jQuery to filter for specific nested unordered lists

From Dev

Split an element containing TextNodes and elements using jQuery

From Dev

How to split string and push in array using jquery

From Dev

how to split values of array using jquery

From Dev

Split the list into columns using jquery or php

From Dev

Split radio button values using jquery / Javascript

From Dev

Split an element containing TextNodes and elements using jQuery

From Dev

how to 'split' a css attribute/value using Jquery

From Dev

How to split input value using jquery?

From Dev

Split form field value using jQuery

From Dev

Split a list in separate lists

From Dev

Split lists within list

From Dev

Split with multiple spaces and lists

From Dev

Split map into two lists

Related Related

  1. 1

    jQuery, nextUntil(), if element is not a paragraph

  2. 2

    jQuery: Wrap elements with nextUntil()

  3. 3

    Get immediate child using nextUntil

  4. 4

    Using JQuery nextUntil to removeClass from all divs except the last in multiple sets

  5. 5

    jQuery split and regroup list by <i> into new lists

  6. 6

    Using jQuery to split a div

  7. 7

    Hide on click Angular JS - jQuery nextUntil() functionality

  8. 8

    Jquery Next/NextAll/NextUntil with count limit

  9. 9

    Split a string by integer in it using jquery

  10. 10

    how to split this string using jquery?

  11. 11

    Split list in multiple small lists after input value is set - Jquery

  12. 12

    jQuery : Split the DOM Node using jQuery

  13. 13

    jQuery $(this).nextUntil('h3').toggle(); - hidden ul inside an ul

  14. 14

    Split list of objects into multiple lists of fields values using Java streams

  15. 15

    Split list of objects into multiple lists of fields values using Java streams

  16. 16

    Using jQuery to filter for specific nested unordered lists

  17. 17

    Split an element containing TextNodes and elements using jQuery

  18. 18

    How to split string and push in array using jquery

  19. 19

    how to split values of array using jquery

  20. 20

    Split the list into columns using jquery or php

  21. 21

    Split radio button values using jquery / Javascript

  22. 22

    Split an element containing TextNodes and elements using jQuery

  23. 23

    how to 'split' a css attribute/value using Jquery

  24. 24

    How to split input value using jquery?

  25. 25

    Split form field value using jQuery

  26. 26

    Split a list in separate lists

  27. 27

    Split lists within list

  28. 28

    Split with multiple spaces and lists

  29. 29

    Split map into two lists

HotTag

Archive