We Keep Coding

Using jQuery .nextUntil() on split lists

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.

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

Assuming these lists cannot be merged into one, it is impossible using the nextUntil method. This is because of how jQuery performs traversing. According to the documentation,
Get all following siblings of each element up to but not including the element matched by the selector, DOM node, or jQuery object passed.
fifth is not a sibling of the clicked element, but rather it is a child of the sibling of the element's parents.
I came up with two possible solutions.
Solution 1: Combine NEXT and PREV traversals
Assuming that .clicked is always in the first list and .selected is always in the second list, combining prevAll() with nextAll() should do the trick. This assumes that the order is the same.
var siblings = $("li.clicked").nextAll()
Get all siblings of the current element AFTER the element itself.
var distantSiblings = $("li.selected").prevAll();
Get all distant siblings after the first element, but before the second one.
siblings.push(distantSiblings);
Combine them into two and then iterate over each element.
var siblings = $("li.clicked").nextAll()
var distantSiblings = $("li.selected").prevAll();
siblings.push(distantSiblings);
siblings.each(function() {
$(this).addClass("blue");
});
.blue { color: blue; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
http://jsfiddle.net/r15z10o4/
Note:
You will notice that the above code works, however it might not be the optimal solution. This is only confirmed to work for your example above. There may also be a less verbose solution.
Solution 2 (Find index of all list items)
Another idea is to find the index of all items, and collect the elements that are sandwiched between those two indices. You will then want to use the 'slice' selector to get the range in between.
var items = $(".item");
var clicked = $(".clicked");
var selected = $(".selected");
var clickIndex = items.index(clicked);
var selectIndex = items.index(selected);
$("li").slice(clickIndex + 1, selectIndex).addClass("blue");
var clicked = $(".clicked");
var selected = $(".selected");
var clickIndex = $("li").index(clicked);
var selectIndex = $("li").index(selected);
$("li").slice(clickIndex+1, selectIndex).addClass("blue");
.blue { color: blue; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

You can do it manually by selecting all these items at once, and using loops.
Consider the parent element, let's say "container":
<div id="container">
<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>
</div>
Now, you can select all these items:
var $items = $("#container > ul > li.item"); // or simply $("#container .item");
And iterate through them:
var $items = $(".item"), $result = $(), found = false;
for (var i = 0; i < $items.length; i++)
{
$currentItem = $items.eq(i);
if ($currentItem.is('.clicked')) {
found = true;
continue;
}
if ($currentItem.is('.selected'))
break;
if (found)
$result = $result.add($currentItem);
}
console.log($result);
Here is the working JSFiddle demo.

In any case it feels like you will need to define groups of li.
I think the easiest is to create a function getting a list of lis that you can request any way you want then to filter the el you are interested in.
function elRange(elList, start, end){
// we do not use indexOf directly as elList is likely to be a node list
// and not an array.
var startI = [].indexOf.call(elList, start);
var endI = [].indexOf.call(elList, end);
return [].slice.call(elList, startI, endI + 1);
}
// request the group of *ordered* elements that can be selected
var liList = document.querySelectorAll('ul.current > li, ul.later > li');
var selectionEnd = document.querySelector('.selected');
[].forEach.call(liList, function(li){
li.addEventListener('click', function(){
var selected = elRange(liList, li, selectionEnd);
selected.forEach(function(el){
el.classList.add('red');
})
});
});
.selected {
color: blue;
}
.red {
color: red;
}
<ul class="current">
<li class="item">first</li>
<li class="item">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>

How to insert after a specific element but before another element

Explaining by example:
<li data-owner="1"></li>
<li data-id="1"></li>
<li data-id="2"></li>
(insert here)
<li data-owner="2"></li>
I want to insert between data-owner="1" and data-owner="2", and insert last - just above data-owner="2".
This do my first requirement:
$('li[data-owner="1"]').after('<li data-id="3"></li>');
But this will insert here:
<li data-owner="1"></li>
(insert here)
<li data-id="1"></li>
<li data-id="2"></li>
<li data-owner="2"></li>
Is there a way to make it insert after one element, and then move down until it finds another element and insert before that? Or find the next element li[data-owner] after a specific element li[data-owner="2"] and insert before that?
I cannot use $('li[data-owner="2"]').before('<li data-id="3"></li>'); because I do not know the specific value of data-owner of the element I want to insert before.

You are going to want to find the next list element with a data id, and then place your insertion before that element. This can be done using nextAll. The example is broken out to show the steps clearer as opposed to being simply chained.
var owner = 1;
var currentOwner = $('li[data-owner='+owner+']');
var nextOwner = currentOwner.nextAll('li[data-owner]:first');
nextOwner.before('<li data-id="3">(insert: li data-id="3")</li>');
//1-liner: $('li[data-owner=1']').nextAll('li[data-owner]:first').before('<li data-id="3">(insert)</li>')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li data-owner="1">data-owner="1"</li>
<li data-id="1">data-id="1"</li>
<li data-id="2">data-id="2"</li>
<li data-owner="2">data-owner="2"</li>

Something along these lines?
<ul>
<li data-owner="1">a</li>
<li data-id="1">b</li>
<li data-id="2">c</li>
<li data-owner="2">d</li>
</ul>
javascript:
var owner_flag = 0;
jQuery("li[data-owner]").each(function(){
if(owner_flag == 1)
{
owner_flag == 0;
jQuery(this).before('<li data-id="3">next</li>');
}
if(jQuery(this).attr("data-owner") == "1")
{
owner_flag = 1;
}
});
https://jsfiddle.net/u7m5mkL6/

How to get specific element javascript based on style

I need to acces an element that has a certain style.
This is my structure
<ul>
<li> Hi </li>
<li> bye </li>
<li> third one </li>
</ul>
The list items are placed on top of each other (last one first) and I can dislike something or like something. Once I do that, it gets a style display:none like following:
<ul>
<li> Hi </li>
<li> bye </li>
<li style:"display:none;"> third one </li>
</ul>
Now after I did that I want to be able to acces the last element that does not have display:none, (the bye) how can I do this?
I was thinking of something in the form of:
var myId = $("#slider > ul li").last().attr("id");
But obviously I always get the ID of the item that is hidden since its still there.
Can I do something like select last where !display:hidden ?

Can I do something like select last where !display:hidden ?
Yes, with jQuery's :visible pseudo-class:
var myId = $("#slider > ul li:visible").last().attr("id");
(Note: Your li elements don't actually have id values, but that's a tweak.)
Live Example:
var listItem = $("#slider > ul li:visible").last();
$("<p>")
.text("Text of last visible item: " + listItem.text())
.appendTo(document.body);
<div id="slider">
<ul>
<li>Hi</li>
<li>bye</li>
<li style="display:none;">third one</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Can use ':visible' selector
var myId = $("#slider > ul li:visible").last().attr("id");

It should work using:
$("#slider > ul li:visible").last().attr("id");
https://api.jquery.com/visible-selector/

so your inline styling is a bit off it should be
<ul>
<li> Hi </li>
<li> bye </li>
<li style="display:none;"> third one </li>
</ul>
You could do a few different things, best is probably just iterate through and check for where display = none, then go to the previous element:
$('ul').children().each(function(e) {
if($(this)[0].style.display == 'none') {
console.log($(this).prev());
}
})

Splitting a ul list of links into a seperate column at a specific point using jQuery or CSS

I currently have a button that has a rather large list of links in it, all in a multiple drop down configuration. for example:
<ul id="nav">
<li>Items
<ul>
<li class="nav-divider">Equipment</li>
<li>Weapons »
<ul>
<li class="nav-divider">One-Handed</li>
<li>Axe</li>
<li>Hammer</li>
<li>Wand</li>
<li>Sword</li>
<li>Dagger</li>
<li class="nav-divider">Two-Handed</li>
<li>Axe</li>
<li>Hammer</li>
<li>Staff</li>
<li>Sword</li>
<!-- Would need to split the list here to a separate column -->
<li class="nav-divider">Ranged</li>
<li>Bow</li>
<li>Crossbow</li>
<li>Ammunition</li>
<li>Arrows</li>
<li>Projectiles</li>
</ul>
</li>
<li>Armor »
<ul>
<li class="nav-divider">Type</li>
<li>Plate »
<ul>
<li>Head</li>
... (a few more, no multiple columns needed)
<li>Shoulders</li>
</ul>
</li>
<li>Chain »
<ul>
<li>Head</li>
...
<li>Shoulders</li>
</ul>
</li>
<li class="nav-divider">Other</li>
<li>Accessories »
<ul>
<li>Earrings</li>
<li>Rings</li>
<li>Necklaces</li>
</ul>
</li>
<li>Off Hand »
<ul>
<li>Shields</li>
<li>Talismans</li>
</ul>
</li>
<li>Back</li>
<li>Amulets</li>
</ul>
</li>
</ul>
</li>
</ul>
Some of the lists are fine, but the list of links under 'Items -> Weapons' is too long, causing the page to stretch slightly down on some lower display resolutions. I would like to split just that list into two columns so that the 'Ranged' divider/header appears in its own column (I've indicated where the split should occur in the code with a comment).
I would assume I would need some sort of Javascript to accomplish this but by now, I've been trying different pieces of code and different methods to get this to happen with no success. Either some solutions split all lists across 2 columns evenly (by using column-count in css) (don't want that), some split the columns but the second doesn't have any formatting (and I don't know why).
I've placed what I have as far as the HTML and CSS3 into a fiddle, which you can view here: http://jsfiddle.net/MSmj9/2/
You can see from the fiddle some stuff in css I've tried by the comments with no success.
Any assistance or guidance you can offer is greatly appreciated.
Best Regards.

What about just splitting that <ul> into two? Check out this (REALLY simplified) fiddle: http://jsfiddle.net/U9CFE/
Here's a sort of template for the CSS, with just your problem area and some generic class names:
.sub, .sub-sub {
display:none;
}
li.parent:hover > .sub {
display: block;
}
li.weapons-parent {
position: relative;
}
.sub-sub {
position: absolute;
border: 1px solid red;
}
.sub-sub:last-child {
left: 199px;
}
.weapons-parent:hover > .sub-sub {
display: inline-block;
}

To accomplish this you need to split your list items into to lists. You can do this on server or client side.
For server side just create extra list with the Ranged weapons, for client side you can do something like that (jQuery exmaple, can be simplified by creating extra classes on list items) http://jsfiddle.net/5hJLv/4/
$(function(){
var dividers = $('#nav .level3 .nav-divider');
if (dividers.length > 2) {
var lastIndex = $(dividers.get(2)).index() - 1;
var extraColumn = $('#nav .level3 > li:gt(' + lastIndex + ')');
var parent = $('#nav .level3').first().parent('li');
var extra = $('<ul class="level3 inserted"></ul>').append(col2.clone());
parent.append(extra);
//extra;
col2.remove();
}
});

How to save HTML ul-li structure into javascript object

i have this following html structure usilg ul and li.
<ul class="treeview" id="productTree">
<li class="collapsable lastCollapsable">
<div class="hitarea collapsable-hitarea lastCollapsable-hitarea"></div>
<span id="top1" class="">top1</span>
<ul>
<li class="collapsable lastCollapsable">
<span class="">mod1</span>
<ul>
<li class="last">
<span>bottom1</span>
</li>
</ul>
</li>
</ul>
</li>
<li class="collapsable lastCollapsable">
<span id="top2" class="">top2</span>
<ul>
<li class="collapsable lastCollapsable">
<span class="">mid2</span>
<ul>
<li class="last">
<span>bottom2</span>
</li>
</ul>
</li>
</ul>
</li>
</ul>
the website allows user to add more data under this structure and am using jquery treeview to show the tree structure dynamically.
Now i need to save this whole ul-li structure into a js object for future use in the website. how do i achieve this? the last node("bottom1 and bottom2 here") has a class "last" if that helps.
as we can add data dynamically we can be sure how much levels of ul li is there at the end when user clicks "save"

You can use recursive function to save a tree object;
function save(obj_ul, tree){
var obj_lis = obj_ul.find("li")
if (obj_lis.length == 0) return;
obj_lis.each(function(){
var $this = $(this);
if($this.parent("ul").get(0) == obj_ul.get(0))
{
tree.push({
name : $this.find('> span').text(),
child : save($this.find("ul").first(), [])
});
}
});
return tree;
}
console.log(save($('#productTree'), []));

If you want to reprouce the same thing verbatim, as a string of HTML elsewhere on the site, you could just do this? Then .append() or .prepend() treeview where you like.
​var treeview = $('#productTree').parent().html()

Assuming you want JSON:
function save(){
var tmp = [];
$('#productTree li.collapsable').each(function(){
var $this = $(this),
$spans = $this.find('span'),
o = [];
$spans.each(function(){
o.push($(this).text())
})
tmp.push(o);
});
return tmp;
}
You could also use map() to accomplish the same thing, too.
EDIT: Updated, assuming your text will live inside a span. This will create an array of arrays, each containing the text from the spans inside each of your list-items.