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');
});
Related
Can anyone please help me on this problem.
I have a list order like:
<ul>
<li class="parent">Parent item 1</li>
<li class="no-parent">item 1</li>
<li class="no-parent">item 2</li>
<li class="parent">Parent item 2</li>
<li class="no-parent">item 3</li>
<li class="no-parent">item 4</li>
<li class="no-parent">item 5</li>
<li class="parent">Parent item 3</li>
<li class="no-parent">item 6</li>
<li class="no-parent">item 7</li>
</ul>
I want this like :
<ul>
<li class="parent">Parent item 1</li>
<div>
<li class="no-parent">item 1</li>
<li class="no-parent">item 2</li>
</div>
<li class="parent">Parent item 2</li>
<div>
<li class="no-parent">item 3</li>
<li class="no-parent">item 4</li>
<li class="no-parent">item 5</li>
</div>
<li class="parent">Parent item 3</li>
<div>
<li class="no-parent">item 6</li>
<li class="no-parent">item 7</li>
</div>
</ul>
is this possible to make it using jQuery?
Thanks in Advance.
If you are able to accept a semantically correct nested list, you could achieve that by using jQuery to loop through each .parent element and select each item after it until it hits the next .parent item using nextUntil(). Then, you create a new <ul> and append those children to it and then append the new <ul> to the parent <li>.
// Select all of the .parents and loop through them.
$('.parent').each(function() {
// Select all the following siblings starting from this .parent element until you reach the next .parent element.
var $children = $(this).nextUntil('.parent');
// Take the results and append them to a new ul element and then append that ul element to the current .parent li element.
$children.appendTo($('<ul>').appendTo($(this)));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="parent">Parent item 1</li>
<li class="no-parent">item 1</li>
<li class="no-parent">item 2</li>
<li class="parent">Parent item 2</li>
<li class="no-parent">item 3</li>
<li class="no-parent">item 4</li>
<li class="no-parent">item 5</li>
<li class="parent">Parent item 3</li>
<li class="no-parent">item 6</li>
<li class="no-parent">item 7</li>
</ul>
I git this list of items and an array to hold 4 of them. When clicking on an item i want it to get pushed to the array, but the array should never be more or less than 4 in its length. So when clicking on one of the LI's i want to push that item to the array. and when the array is full (when the lenght is 4) i instead want the first element in the array to be swapped out to whatever next item that gets clicked is.
My markup looks similar to this:
<ul>
<li>val 1</li>
<li>val 2</li>
<li>val 3</li>
<li>val 4</li>
<li>val 5</li>
<li>val 6</li>
<li>val 7</li>
<li>val 8</li>
<li>val 9</li>
</ul>
var ar=[];
function clickFunc(e){
if(ar.length<4){
ar.push(e.innerHTML);
}
else{
ar.unshift(e.innerHTML);
ar.pop();
}
console.log(ar)
}
<ul>
<li onclick="clickFunc(this)">val 1</li>
<li onclick="clickFunc(this)">val 2</li>
<li onclick="clickFunc(this)">val 3</li>
<li onclick="clickFunc(this)">val 4</li>
<li onclick="clickFunc(this)">val 5</li>
<li onclick="clickFunc(this)">val 6</li>
<li onclick="clickFunc(this)">val 7</li>
<li onclick="clickFunc(this)">val 8</li>
<li onclick="clickFunc(this)">val 9</li>
</ul>
u can unshift(),then pop() array.
I've got an unordered list that I want to sort. All the list items have a data attribute data-index with their corresponding list index number. I want to order the list according to this index number, however, I want to ignore the list item that has the class .active
So in my following structure I'm trying to return all the list items after the one with the class active in the order of their data-index. The list item with class .active should be ignored and stay on top.
<ul>
<li class="active" data-index="8">Item 8</li>
<li class="inactive" data-index="6">Item 6</li>
<li class="inactive" data-index="5">Item 5</li>
<li class="inactive" data-index="3">Item 3</li>
<li class="inactive" data-index="4">Item 4</li>
<li class="inactive" data-index="2">Item 2</li>
<li class="inactive" data-index="1">Item 1</li>
<li class="inactive" data-index="7">Item 7</li>
<li class="inactive" data-index="9">Item 9</li>
</ul>
How would I go about doing this?
I've included a jsfiddle with my basic structure.
http://jsfiddle.net/T9qQt/6/
Any help would be appreciated.
$('#sortList').click(function(){
$('ul .inactive').sort(function(a,b) {
return $(a).data('index') > $(b).data('index');
}).appendTo('ul');
});
Fiddle
Try
$('#sortList').click(function () {
var $active = $('.active');
var els = $active.nextAll().sort(function(e1, e2){
return +$(e1).data('index') - +$(e2).data('index');
}).insertAfter($active);
});
Demo: Fiddle
This would do the job,
$('#sortList').click(function () {
$("ul li.inactive").sort(function (a, b) {
return +$(a).data('index') - +$(b).data('index');
}).appendTo($("ul"));
});
Fiddle
<ul>
<li class="inactive" data-index="8">Item 8</li>
<li class="inactive" data-index="6">Item 6</li>
<li class="inactive" data-index="5">Item 5</li>
<li class="inactive" data-index="3">Item 3</li>
<li class="inactive" data-index="4">Item 4</li>
<li class="inactive" data-index="2">Item 2</li>
<li class="inactive" data-index="1">Item 1</li>
<li class="inactive" data-index="7">Item 7</li>
<li class="inactive" data-index="9">Item 9</li>
</ul>
<button id="sortList">Sort this list</button>
$('#sortList').click(function(){
$('.inactive').sort(function(x,y) {
return $(x).data('index') - $(y).data('index');
}).appendTo($('.inactive').parent());
});
Demo
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 a variable set that represents an item in the list.
I also have the list:
<ul>
<li class="mylist">Item 1</li>
<li class="mylist">Item 2</li>
<li class="mylist">Item 3</li>
<li class="mylist">Item 4</li>
<li class="mylist">Item 5</li>
<li class="mylist">Item 6</li>
</ul>
What I need to do is to add a css class to the list thats in the position of the variable value.
For example:
If myVariable = '1' then list will look like this:
<ul>
<li class="mylist">Item 1</li>
<li class="mylist">Item 2</li>
<li class="mylist">Item 3</li>
<li class="mylist">Item 4</li>
<li class="mylist">Item 5</li>
<li class="mylist">Item 6</li>
</ul>
If myVariable = '3' then list will look like this:
<ul>
<li class="mylist">Item 1</li>
<li class="mylist">Item 2</li>
<li class="mylist">Item 3</li>
<li class="mylist">Item 4</li>
<li class="mylist">Item 5</li>
<li class="mylist">Item 6</li>
</ul>
and so on.
How can I do this?
var value = 3;
$('ul li.mylist a').filter(function () {
return $(this).text() === 'Item ' + value;
}).addClass('myclass');
You can use the eq method in jQuery for selecting element by index:
const myVariable = 3;
$('.mylist').eq(myVariable - 1).find('a').addClass('myClass');
Mind that eq assumes that your indices are 0-based (which means the first one is 0 and not 1). That's why it's myVariable - 1.
$("li.mylist").eq(position -1).find("a").addClass("myClass")