I have something like this:
<ul>
<li id="li1">1</li>
<li id="li2">2</li>
<li id="li3">3</li>
</ul>
And I wonder if there is possible to move the list number 3, to the place of the list number 1 using javascript or jquery, like this:
<ul>
<li id="li3">3</li>
<li id="li2">2</li>
<li id="li1">1</li>
</ul>
Thanks for you time!
No jQuery solution :
var list = document.getElementsByTagName('ul')[0],
items = list.getElementsByTagName('li'),
i = items.length;
while (i--) list.appendChild(items[i]);
Here is a demo : http://jsfiddle.net/wared/tJaJ9/.
Based on cookie monster's suggestion :
var list = document.getElementsByTagName('ul')[0],
i = list.children.length;
while (i--) list.appendChild(list.children[i]);
Just for fun :
var list = document.getElementsByTagName('ul')[0],
items = Array.prototype.slice.call(list.children);
while (items.length) list.appendChild(items.pop());
A jQuery one :
$('ul').append($('li').get().reverse());
You can use ajax sortable jquery plugin. One of my recommendation tutorial is Sortable Lists Using jQuery UI .
Here user can re-order list using cursor pointer.
This should do the trick for you.
var length = $('ul li').length;
while (length--) $('ul').append($('ul li')[length]);
Here is a working jsfiddle
Related
Not jQuery as I would simply do $("this").parent().addClass("active"); but in pure javascript. This is because i don't want to mix up Javascript and jQuery on the following code:
var clickedPath = this.getElement();
clickedPath.classList.add("active");
var classes = clickedPath.getAttribute('class').match(/\d+/g) || [];
buttons.forEach(function(btn) {
var method = classes.indexOf(btn.getAttribute('data-date')) > -1 ? 'add' : 'remove';
btn.classList[method]('active');
//btn.parent().addClass("active");
});
UPDATE
This is the HTML starting case before the classes are added:
<ul>
<li>1500</li>
<li>1400
<ul>
<li>1401</li>
</ul>
</li>
</ul>
We have 2 situations:
1500 is single and doesn't have a child
1400 has a child 1401
If I am adding the class active to 1500, it's fine and I can use the code provided in the answer:
btn.parentNode.classList[method]('active');
But If I add the class to 1401, also 1400 should have it, so the followings are the two cases:
<ul>
<li class="active">1500</li>
<li>1400
<ul>
<li>1401</li>
</ul>
</li>
</ul>
Or
<ul>
<li>1500</li>
<li class="active">1400
<ul>
<li class="active">1401</li>
</ul>
</li>
</ul>
You mention " i don't want to mix up js and jQuery on the following code" but you are actually mixing vanilla DOM APIs with jQuery methods. .parent and .addClass are jQuery functions. You can code:
btn.parentNode.classList.add("active");
Also consider parentElement as an alternative to parentNode:
btn.parentElement.classList.add("active");
You need .parentNode on the element.
Something like this.
var clickedPath = this.getElement();
clickedPath.classList.add("active");
var classes = clickedPath.getAttribute('class').match(/\d+/g) || [];
buttons.forEach(function(btn) {
var method = classes.indexOf(btn.getAttribute('data-date')) > -1 ? 'add' : 'remove';
btn.classList[method]('active');
btn.parentNode.classList.add("active");
});
Thanks to this idea
http://www.redotheweb.com/2013/05/15/client-side-full-text-search-in-css.html, I implemented a client side text search using CSS3 data attributes and JQuery.
This is an HTML example
<input type="text" id="search">
<a id="btn">Filter</a>
<ul>
<li data-index="A01658">A01658 and other stuff</li>
<li data-index="A09956">A09956 and other stuff</li>
<li data-index="B25628">B25628 and other stuff</li>
<li data-index="A01777">A01777 and other stuff</li>
</ul>
And this is the JS code (jQuery required)
$('#btn').click(function() {
$('ul > li:not([data-index=\"' + $('#search').val() + '\"])').hide();
});
It works. But only "full" text. I need to let the users to perform "partial" text search (a good example is LIKE operator in MySQL).
If "A01" is entered, both first and fourth box should remain visible.
If "995" is entered, only second box should remain visible.
In there any chance to do this?
Thank you
Try this, Here is http://api.jquery.com/attribute-contains-selector/
$('#btn').click(function() {
$('ul > li:not([data-index*=\"' + $('#search').val() + '\"])').hide();
});
Another one here. This would work as and when the user types in the search field and filter LI's accordingly. This is also case insensitive.
var items = $('ul > li');
var search = $('#search');
search.on("keyup", function() {
items.show().filter(function() {
return $(this).data("index").toLowerCase().indexOf(search.val().toLowerCase()) < 0
}).hide();
});
Demo#fiddle
In the main navigation there are some links including a#estimate
mainNav = document.getElementById('mainNavigation');
subNav = document.getElementById('subNavigation');
This is subnavigation for a#estimate
estimateSubNav = '<li>Create new</li>';
All I need to do is check what ID has current link...
currSectionId = $(mainNav).find('a.current').attr('id');
...and on this basis append to unordered subnav list prepared string
$(subNav).append(currSectionId+'SubNav');
So in "the estimate" case, the sub navigation should look like
<ul id="subNavigation">
<li>Create new</li>
</ul>
At this moment it shows me just estimateSubNav, like you can read it
<ul id="subNavigation">
estimateSubNav
</ul>
What I'm doing wrong? Any help is appreciated.
EDIT:
http://jsfiddle.net/8sHnC/3/
I am not sure whether this is what you are trying to do
var mainNav = document.getElementById('mainNavigation');
var subNav = document.getElementById('subNavigation');
var estimateSubNav = '<li>Create new</li>';
var currSectionElement = $(mainNav).find('a.current')[0];
var newElement=$(currSectionElement).clone().attr("id",currSectionElement.id+"subNav");
$(subNav).append(newElement);
Based on your Fiddle, Updated DEMO
i hope this will solve your problem
var li = $("<li/>").attr("href","?s="+currSectionId+"&p=create");
$(subNav).append(li);
I have a sortable list (jQuery UI) formatted as something like this:
<ul class="baseList">
<li id="3">Item 1
<ul class="childList">
<li id="68">Child 1 of Item 1</li>
<li id="69">Child 2 of Item 1</li>
<li id="70">Child 3 of Item 1</li>
</ul>
</li>
<li id="8">Item 2
<ul class="childList">
<li id="81">Child 1 of Item 2</li>
<li id="83">Child 2 of Item 2</li>
</ul>
</li>
</ul>
What I am trying to achieve is to get an array variable that consists out of something like this:
var entireList = [];
entireList = [[3,[68, 69, 70], 8, [81, 83]]]
So I can post that variable to PHP to process it in the database.
I cant seem to figure out how I can solve this in javascript. What I have so far is the following:
var childList = $('.childList, .baseList').sortable({
placeholder: "ui-state-highlight",
opacity: 0.6,
update: function(event, ui){
var childArray = $('.childList').sortable('toArray');
var parentsArray = $('.baseList').sortable('toArray');
for(p in parentsArray)
{
postChildData[parentsArray[p]] = childArray;
}
console.log(postChildData);
}
});
Now that works for halve, my result is:
[3: Array[3], 8: Array[3]]
Comes down to th point that it only takes the children of the first <li> element.
Can someone here help me to get an array like the one i've written above (entireList)?
Instead of using childArray in your for loop use this:
$('#' + parentsArray[p] + ' > ul').sortable('toArray');
it may not be proper css, but give the second list a different class name, i gave it childList2 in this example. If you do not want to modify the ul you could bump the differentiation up a level to the parent li as well
var childArray = [];
var childArray2 = [];
$.each(childList, function(children) {
childArray.push(children);
});
$.each(childList2, function(children2) {
childArray2.push(children2);
});
If that doesnt work I should stop guessing without a way to test it on my own. You
Ok, I finally found the solution:
I needed to create a new Array, within there I needed to store the Parent ID and also the array with childs.
The way to do that is replace the for loop with the following:
for(p in parentsArray)
{
postListData[p] = Array(parentsArray[p], $('#' + parentsArray[p] + ' > ul').sortable('toArray'));
}
This question already has answers here:
How may I sort a list alphabetically using jQuery?
(10 answers)
Closed 5 years ago.
Is it possible to reorder <li> elements with JavaScript or pure jQuery. So if I have a silly list like the following:
<ul>
<li>Foo</li>
<li>Bar</li>
<li>Cheese</li>
</ul>
How would I move the list elements around? Like put the list element with Cheese before the list element with Foo or move Foo to after Bar.
Is it possible? If so, how?
var ul = $("ul");
var li = ul.children("li");
li.detach().sort();
ul.append(li);
This is a simple example where <li> nodes are sorted by in some default order. I'm calling detach to avoid removing any data/events associated with the li nodes.
You can pass a function to sort, and use a custom comparator to do the sorting as well.
li.detach().sort(function(a, b) {
// use whatever comparison you want between DOM nodes a and b
});
If someone is looking to reorder elements by moving them up/down some list one step at a time...
//element to move
var $el = $(selector);
//move element down one step
if ($el.not(':last-child'))
$el.next().after($el);
//move element up one step
if ($el.not(':first-child'))
$el.prev().before($el);
//move element to top
$el.parent().prepend($el);
//move element to end
$el.parent().append($el);
One of my favorite things about jQuery is how easy it is to write tiny little add-ons so quickly.
Here, we've created a small add-on which takes an array of selectors, and uses it to order the children of the target elements.
// Create the add-on
$.fn.orderChildren = function(order) {
this.each(function() {
var el = $(this);
for(var i = order.length - 1; i >= 0; i--) {
el.prepend(el.children(order[i]));
}
});
return this;
};
// Call the add-on
$(".user").orderChildren([
".phone",
".email",
".website",
".name",
".address"
]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="user">
<li class="name">Sandy</li>
<li class="phone">(234) 567-7890</li>
<li class="address">123 Hello World Street</li>
<li class="email">someone#email.com</li>
<li class="website">https://google.com</li>
</ul>
<ul class="user">
<li class="name">Jon</li>
<li class="phone">(574) 555-8777</li>
<li class="address">123 Foobar Street</li>
<li class="email">jon#email.com</li>
<li class="website">https://apple.com</li>
</ul>
<ul class="user">
<li class="name">Sarah</li>
<li class="phone">(432) 555-5477</li>
<li class="address">123 Javascript Street</li>
<li class="email">sarah#email.com</li>
<li class="website">https://microsoft.com</li>
</ul>
The function loops backwards through the array and uses .prepend so that any unselected elements are pushed to the end.
Here is a jQuery plugin to aid with this functionality: http://tinysort.sjeiti.com/
something like this?
var li = $('ul li').map(function(){
return this;
}).get();
$('ul').html(li.sort());
demo
I was somewhat lost you may be wanting something like this...
$('ul#list li:first').appendTo('ul#list'); // make the first to be last...
$('ul#list li:first').after('ul#list li:eq(1)'); // make first as 2nd...
$('ul#list li:contains(Foo)').appendTo('ul#list'); // make the li that has Foo to be last...
more of it here1 and here2
Have a look at jquery ui sortable
http://jqueryui.com/demos/sortable/