I am using jquery-ui for sort and drag https://johnny.github.io/jquery-sortable/.. But it doesn't append in li..
The code is like
$("#example3 ul").sortable({
placeholder: "ui-state-highlight",
connectWith: '#example3 ul'
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<div id="example3">
<ul>
<li >Item 1
<ul>
<li>Item 1 1</li>
<li>Item 1 2</li>
<li>Item 1 3</li>
</ul>
</li>
<li >Item 2<ul></ul></li>
<li >Item 3<ul></ul></li>
<li >Item 4<ul></ul></li>
</ul>
</div>
If I drag item 3 to under item 2 then it doesn't work..How can I solve this?? and also I have to detect that which li goes under which li.. please Help..
Problem is, that the empty 'ul'-Tags does not have any space and are hidden (size is equals zero). Just add a small padding to each element, then you can drag your element there. Here, have a look:
$("#example3 ul").sortable({
placeholder: "ui-state-highlight",
connectWith: '#example3 ul'
});
#example3 ul{
padding-bottom: 0.3em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<div id="example3">
<ul>
<li >Item 1
<ul>
<li>Item 1 1</li>
<li>Item 1 2</li>
<li>Item 1 3</li>
</ul>
</li>
<li >Item 2<ul></ul></li>
<li >Item 3<ul></ul></li>
<li >Item 4<ul></ul></li>
</ul>
</div>
Related
I am using jQuery UI's .sortable feature. I have list a and list b. I want the user to be able to:
Drag items from list a to list b but not from list b to list a
Sort items in list b but not in list a
My code meets only meets the first requirement. I can't stop items being sorted in list a.
While the code in the answer https://stackoverflow.com/a/14442218/5798798 automatically reverses any sorting done in a list, it doesn't prevent sorting within it all together (which is what I'm looking for).
$("#sortable").sortable({
connectWith: "#sortable2"
});
$("#sortable2").sortable({});
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<p>List A</p>
<div id="sortable">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</div>
<p>List B</p>
<div id="sortable2">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</div>
JsFiddle: http://jsfiddle.net/g5nxjk0e/1/
Note that there could be multiple lists that list a can be dragged into
Please review: https://jqueryui.com/draggable/#sortable
Example:
$(function() {
$(".drag > li").draggable({
connectToSortable: ".sort",
revert: "invalid"
});
$(".sort").sortable();
});
ul {
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 10px;
}
li {
margin: 5px;
padding: 5px;
width: 150px;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<p>List A</p>
<ul id="drag-1" class="drag">
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ul>
<p>List B</p>
<ul id="sort-1" class="sort">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<p>List c</p>
<ul id="sort-2" class="sort">
<li>Apple</li>
<li>Blueberry</li>
<li>Cherry</li>
</ul>
I have a collection of unordered lists. I would like to iterate through this list and than find an specific li item and than add a class to the ul containing that li.
I hope I was clear enough for you guys. Let me show you my code for better understanding.
This is a fiddle I created to help you understand my problem.
https://jsfiddle.net/wdwn9swu/
This is what I tried to target the ul I need but it didn't work.
if ($('ul.sub-tab').find('ul.sub-tab > li.super-active')) {
$('ul.sub-tab').find('li.super-active').addClass('super-active');
}
I would like that on of the lists that corresponds with the id, to always be open.
Any idea guys ?? Thanks!!
I think the easiest and simplest way is:
$("li.super-active").parent().addClass("super-active");
According the fact you are using valid html <li> element parent must be <ul> element in that case (can also be <ol>).
$('.main-tab>li a').click(function() {
$(this).siblings('.sub-tab').slideToggle(200);
$(this).parent().siblings('li').children('.sub-tab').slideUp(200);
});
$('.main-tab li').each(function() {
id = '10';
$links = $(".main-tab li[data-id =" + id + "]");
$links.addClass("super-active");
//console.log("1234");
});
$("li.super-active").parent().addClass("super-active");
console.log($(".super-active"));
.main-tab ul {
padding-left: 10px;
}
.sub-tab {
display: none;
}
.super-active img {
display: block !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="center">
<ul class="main-tab">
<li data-id="5">
Main 1
<ul class="sub-tab">
<li data-id="7">
Main 1 Sub 1
<ul class="sub-tab">
<li data-id="10">Sub 2</li>
<li data-id="11">Sub 2</li>
</ul>
</li>
<li>
Main 1 Sub 2
<ul class="sub-tab">
<li data-id="12">Sub 2</li>
<li data-id="13">Sub 2</li>
</ul>
</li>
</ul>
</li>
<li data-id="8">
Main 2
<ul class="sub-tab">
<li data-id="9">
Main 2 Sub 1
<ul class="sub-tab">
<li data-id="14">Sub 2</li>
<li data-id="15">Sub 2</li>
</ul>
</li>
</ul>
</li>
<li data-id="3">
Main 3
<ul class="sub-tab">
<li data-id="25">
Main 3 Sub 1
<ul class="sub-tab">
<li data-id="17">Sub 2</li>
<li data-id="18">Sub 2</li>
</ul>
</li>
</ul>
</li>
</ul>
Use jQuery's :has selector:
Selects elements which contain at least one element that matches the
specified selector.
Find ul.sub-tab that has a list item with .super-active class, and add the class .super-active to the ul as well:
$('ul.sub-tab:has(li.super-active)').addClass('super-active');
Example:
$('ul.sub-tab:has(li.super-active)').addClass('super-active');
.sub-tab.super-active {
background: gold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="center">
<ul class="main-tab">
<li data-id="5">
Main 1
<ul class="sub-tab"> <!-- this will be removed -->
<li data-id="7" class="super-active">
Main 1 Sub 1
<ul class="sub-tab">
<li data-id="10">Sub 2</li>
<li data-id="11">Sub 2</li>
</ul>
</li>
<li>
Main 1 Sub 2
<ul class="sub-tab">
<li data-id="12">Sub 2</li>
<li data-id="13">Sub 2</li>
</ul>
</li>
</ul>
</li>
<li data-id="8">
Main 2
<ul class="sub-tab">
<li data-id="9">
Main 2 Sub 1
<ul class="sub-tab">
<li data-id="14">Sub 2</li>
<li data-id="15">Sub 2</li>
</ul>
</li>
</ul>
</li>
<li data-id="3">
Main 3
<ul class="sub-tab">
<li data-id="25">
Main 3 Sub 1
<ul class="sub-tab">
<li data-id="17">Sub 2</li>
<li data-id="18">Sub 2</li>
</ul>
</li>
</ul>
</li>
</ul>
The left is what my code does, the right is what I want it to do. When clicking on a menu item it collapses fine but I want to be able to un-collapse them after and be able to collapse all of them if I wish.
$('.nav-second').on('show.bs.collapse', function () {
$('.nav-second.in').collapse('hide');
});
html
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand"></li>
<li>
<i class="material-icons">home</i>
</li>
<li>
Overall
<ul id="overall" class="nav-second collapse">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</li>
<li>
Dashboard
<ul id="dashboard" class="nav-second collapse">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</li>
<li>
Service
<ul id="service" class="nav-second collapse">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</li>
<li>
</ul>
If you need this approach just remove that jQuery code.
I mean this one:
$('.nav-second').on('show.bs.collapse', function () {
$('.nav-second.in').collapse('hide');
});
I have done this http://jsbin.com/UBezOVA/1/edit.
When I click the submit button, i want to get the current order of the list item. But, it seems that
$("#sortable2").sortable("toArray") does not show the current order of list (for example sortable2).
How to get the current order of a list.
Part of your issue is a typographical error, omitting the # from the id in your jQuery selector. Otherwise, your usage of .sortable("toArray") is correct. (Note, I used console.log() there instead of alert() - watch the browser's console for better output)
function submit(){
var idsInOrder = $("#sortable2").sortable("toArray");
//-----------------^^^^
console.log(idsInOrder);
}
However, as documented the toArray() method will use the id attribute of sortable items by default when serializing. You will need to add a unique id attribute to each of the sortable items for this to work:
<ul id="sortable2" class="connectedSortable">
<li class="ui-state-highlight" id='i1'>Item 1</li>
<li class="ui-state-highlight" id='i2'>Item 2</li>
<li class="ui-state-highlight" id='i3'>Item 3</li>
<li class="ui-state-highlight" id='i4'>Item 4</li>
<li class="ui-state-highlight" id='i5'>Item 5</li>
</ul>
Put those two together and it will work as you expect: http://jsbin.com/UBezOVA/6/edit
gaurav is on the right track, but as purefusion mentioned "id attributes are always supposed to start with an alpha character"
Accordingly,
The html valid approach is to add data attributes
const idsInOrder = $("#sortable2").sortable('toArray', {attribute: 'data-id'});
$(document).ready(function() {
const idsInOrder = $("#sortable2").sortable('toArray', {
attribute: 'data-id'
});
console.log(idsInOrder);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>
<ul id="sortable2" class="connectedSortable">
<li data-id="1" class="ui-state-highlight">Item 1</li>
<li data-id="2" class="ui-state-highlight">Item 2</li>
<li data-id="3" class="ui-state-highlight">Item 3</li>
<li data-id="4" class="ui-state-highlight">Item 4</li>
<li data-id="5" class="ui-state-highlight">Item 5</li>
</ul>
The documentation of toArray of Soratble [link here] clearly says that it Serializes the sortable's item id's into an array of string.
That means, you should use your sortable elements with an id for each one
<ul id="sortable2" class="connectedSortable">
<li id="1" class="ui-state-highlight">Item 1</li>
<li id="2" class="ui-state-highlight">Item 2</li>
<li id="3" class="ui-state-highlight">Item 3</li>
<li id="4" class="ui-state-highlight">Item 4</li>
<li id="5" class="ui-state-highlight">Item 5</li>
And now your code var idsInOrder = $("#sortable2").sortable('toArray');
alert(idsInOrder); will definitely output an array.
JS :
$(function() {
$( "#sortable1, #sortable2" ).sortable({
connectWith: ".connectedSortable"
}).disableSelection();
});
function submit(){
var idsInOrder = [];
$("ul#sortable1 li").each(function() { idsInOrder.push($(this).text()) });
alert(idsInOrder.join('\n'));
}
HTML :
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Sortable - Connect lists</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style>
#sortable1, #sortable2 { list-style-type: none; margin: 0; padding: 0 0 2.5em; float:left; margin-right: 10px; }
#sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em;width: 120px; }
</style>
<script>
</script>
</head>
<body>
<ul id="sortable1" class="connectedSortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
</ul>
<ul id="sortable2" class="connectedSortable">
<li class="ui-state-highlight">Item 1</li>
<li class="ui-state-highlight">Item 2</li>
<li class="ui-state-highlight">Item 3</li>
<li class="ui-state-highlight">Item 4</li>
<li class="ui-state-highlight">Item 5</li>
</ul>
<input type="submit" value="Submit" onclick="submit()">
</body>
</html>
This should help to display the items in current order.
See final ourput here : http://jsbin.com/UBezOVA/21/edit
$( function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
} );
function submit(){
var idsInOrder = $("#sortable").sortable("toArray");
alert(idsInOrder);
}
<ul id="sortable">
<li class="ui-state-default" id='1'><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
<li class="ui-state-default" id='2'><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
<li class="ui-state-default" id='3'><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
<li class="ui-state-default" id='4'><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
<li class="ui-state-default" id='5'><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
<li class="ui-state-default" id='6'><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
<li class="ui-state-default" id='7'><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>
<input type="button" id="btnSubmit" value="Submit" onclick="submit()">
I have the following HTML and I'd like to zebra stripe the contents in groups of 3:
<ul id="item-order">
<li class="thumbnail">Item 1</li>
<li class="thumbnail">Item 2</li>
<li class="thumbnail">Item 3</li>
<li class="thumbnail">Item 4</li>
<li class="thumbnail">Item 5</li>
<li class="thumbnail">Item 6</li>
<li class="thumbnail">Item 7</li>
<li class="thumbnail">Item 8</li>
<li class="thumbnail">Item 9</li>
</ul>
So I'd like to generate the following using jQuery:
<ul id="item-order">
<li class="thumbnail stripe">Item 1</li>
<li class="thumbnail stripe">Item 2</li>
<li class="thumbnail stripe">Item 3</li>
<li class="thumbnail">Item 4</li>
<li class="thumbnail">Item 5</li>
<li class="thumbnail">Item 6</li>
<li class="thumbnail stripe">Item 7</li>
<li class="thumbnail stripe">Item 8</li>
<li class="thumbnail stripe">Item 9</li>
</ul>
How can I go about this? I have something like this in mind, but I'm not sure what to put in the if statement.
$('#item-order li:visible').each(function (i) {
if (...) $(this).addClass('stripe');
});
If you want to add it to the first 3 in sets of 6, you can use the modulus 6 operator. If you want to start with stripes use the following:
$('#item-order li:visible').each(function (i) {
if (i%6 <= 2) {
$(this).addClass('stripe');
}
});
jquery has :odd and :even selectors, so you can just do:
$( '#item-order li:odd' ).addClass( 'odd' );
$( '#item-order li:even' ).addClass( 'even' );
EDIT, completely missed the point, this should be about what you want:
$('#item-order li:visible').each(function (i) {
if( i % 6 <= 2 ) $(this).addClass('stripe');
});