Adding a different class for every six list items using jQuery
I am trying to add a different class for every six list items using jQuery.
I've tried looking .append()
and .after()
, but I'm not sure about the logic behind using them.
How can I get the following structure through JQuery:
<ul>
<li class="white">white</li>
<li class="white">white</li>
<li class="white">white</li>
<li class="white">white</li>
<li class="white">white</li>
<li class="white">white</li>
<li class="blue">blue</li>
<li class="blue">blue</li>
<li class="blue">blue</li>
<li class="blue">blue</li>
<li class="blue">blue</li>
<li class="blue">blue</li>
<li class="red">red</li>
<li class="red">red</li>
<li class="red">red</li>
<li class="red">red</li>
<li class="red">red</li>
<li class="red">red</li>
</ul>
I also want to move this group of six items with one class to the top of the list by clicking a button.
Script:
$('button').on('click', function(){
$('ul li.blue').append($('ul li:nth-child(2)'));
});
source to share
You can use the method slice()
like this:
var colors = ["white", "blue", "red"];
var $listItems = $("li");
$.each(colors, function(i, color) {
$listItems.slice(i * 6, ++i * 6).addClass(color);
$("body").append($("<button/>", {
text: color,
css: {
"background-color": color
}
}))
});
var colors = ["white", "blue", "red"];
var $listItems = $("li");
$.each(colors, function(i, color) {
$listItems.slice(i * 6, ++i * 6).addClass(color);
$("body").append($("<button/>", {
text: color,
css: {
"background-color": color
}
}))
});
$('button').on('click', function() {
$('ul li.' + $(this).text()).prependTo('ul');
});
ul {
list-style-type: none;
}
li {
width: 100px;
height: 20px;
border: 1px solid;
}
.white {
background: #fff;
}
.blue {
background: dodgerblue;
}
.red {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>white</li>
<li>white</li>
<li>white</li>
<li>white</li>
<li>white</li>
<li>white</li>
<li>blue</li>
<li>blue</li>
<li>blue</li>
<li>blue</li>
<li>blue</li>
<li>blue</li>
<li>red</li>
<li>red</li>
<li>red</li>
<li>red</li>
<li>red</li>
<li>red</li>
</ul>
UPDATE
As per your comment, you can extract colors from data()
with map()
, for example:
var colors = $("div").map(function(){
return $(this).data("color");
});
You can use the jQuery method each()
to iterate over the array of colors we have extracted.
In each iteration, we create a new one <li>
with the text and class equal to the color that is repeated.
We then create an HTMLString corresponding to the n
number of such elements, passing the outerHTML
sample <li>
we created for the array to a join()
method like:
new Array(7).join($li.get(0).outerHTML);
Then append()
this HTMLString
in <ul>
, as we create a button that group similar to , to bring them on top of the list. prepend()
<li>
<ul>
var colors = $("div").map(function() {
return $(this).data("color");
});
var $ul = $("ul"),
$body = $("body");
$.each(colors, function(i, color) {
var $li = $("<li/>", {
text: color,
class: color
});
$ul.append(new Array(7).join($li.get(0).outerHTML));
$body.append($("<button/>", {
text: color,
css: {
"background-color": color
},
on: {
click: function() {
$('ul li.' + $(this).text()).prependTo('ul');
}
}
}));
});
ul {
list-style-type: none;
}
li {
width: 100px;
height: 20px;
border: 1px solid;
}
.white {
background: #fff;
}
.blue {
background: dodgerblue;
}
.red {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-color="white"></div>
<div data-color="blue"></div>
<div data-color="red"></div>
<ul>
</ul>
Side notes. If you want to have different text for the buttons, you can save the data as an attribute data-*
and use it to find the corresponding group.
Also, I added CSS classes for demonstration, you have to apply css when creating <li>
, as it is impractical to have predefined CSS classes dynamically doing this.
source to share
Is this what you are looking for?
You want .prepend()
yours li
.
Html
<button id="white">Move White</button><button id="blue">Move Blue</button><button id="red">Move Red</button>
<ul>
<li class="white">white</li>
<li class="white">white</li>
<li class="white">white</li>
<li class="white">white</li>
<li class="white">white</li>
<li class="white">white</li>
<li class="blue">blue</li>
<li class="blue">blue</li>
<li class="blue">blue</li>
<li class="blue">blue</li>
<li class="blue">blue</li>
<li class="blue">blue</li>
<li class="red">red</li>
<li class="red">red</li>
<li class="red">red</li>
<li class="red">red</li>
<li class="red">red</li>
<li class="red">red</li>
</ul>
Js
$('button').click(function(e) {
var color = $(this).prop('id');
var $lis = $('li.' + color);
$lis.remove();
for (var i = 0; i < $lis.length; i++) {
$('ul').prepend('<li class="' + color + '">' + color + '</li>');
}
});
CSS
li {
padding: 10px;
list-style: none;
}
.white {
background-color: lightgray;
}
.blue {
background-color: lightblue;
}
.red {
background-color: pink;
}
Update
I have updated working with a variable number of elements.
source to share
Like this:
http://jsfiddle.net/CaseyRule/vkgrozj8/3/
$('input').click( function(e) {
var c = $(e.target).val();
$('ul').find('.'+c).each( function( index, element ) {
console.log(element);
$('ul').prepend(element);
});
});
source to share