I want to change the class of each list(#list) item to the correspondent one at an Array. I have a list that is like this:
<ul id="list">
<li>Banana</li>
<li>Apple</li>
<li>Pear</li>
<li>Strawberry</li>
<li>Lemon</li>
</ul>
And I have this array:
["ban", "appl", "per", "straw", "lemn"]
What I want is that jQuery .addClass() function to change each item with the class in the order as they are on the Array. To result into this:
<ul id="list">
<li class="ban">Banana</li>
<li class="appl">Apple</li>
<li class="per">Pear</li>
<li class="straw">Strawberry</li>
<li class="lemn">Lemon</li>
</ul>
How can I do it?
This should work for you:
var classes = ["ban", "appl", "per", "straw", "lemn"];
$('#list > li').addClass(function(index) {
return classes[index];
});
You can see the documentation for this overload (the one that takes a function(index, currentClass) callback) on the jQuery website.
$('#list > li').each(function(i){
$(this).addClass( myArray[i] );
});
var myArray = ["ban", "appl", "per", "straw", "lemn"];
$("#list > li").each(function(index) {
$(this).addClass(myArray[index]);
});
$.each(myArray, function(i, value){
$('#list li').eq(i).addClass(value);
}
);
Related
this is probably an easy question for you guys but I'm very new to coding and can't figure out this. I have a code that I want to randomize the given choices in the questions, and I've found a script online that does that but it's not working. I don't know what the
// shuffle only elements that don't have "group" class
$ul.find("li[class!='single_question', 'question', 'title', 'text']").each(function() {
means so I tried to put all id that I don't need to randomize in it but it's still not working.
Can someone help me this please? Also is there anyway I can add choice "A", choice "B", choice "C", and choice "D" in front of each given options so even after the options(answers) are randomized, the A,B,C,D options will still be in order? Thank you. Here's the code:
HTML:
<!DOCTYPE html>
<html>
<body>
<script src="JQ.js"></script>
<script src="function.js"></script>
<link href="style.css" rel="stylesheet" />
<div id="quiz_container">
<ul class="quiz_container">
<li class="single_question" data-question-id="1" data-correct-answer="1">
<div class="question">
<h1 class="title">P.1 Grammar Review</h1>
<p class="text">1. "What is your name__"</p>
</div>
<ul class="options">
<li value="1">?</li>
<li value="2">.</li>
<li value="3">,</li>
</ul>
<div class="result"></div>
</li>
<li class="single_question" data-question-id="2" data-correct-answer="b">
<div class="question">
<p class="text">2. "Do you like the banana__"</p>
</div>
<ul class="options">
<li value="a">.</li>
<li value="b">?</li>
<li value="c">,</li>
</ul>
<div class="result"></div>
</li>
</div>
</body>
</html>
JS:
$(document).ready(function () {
/*
* shuffles the array
* #param {Array} myArray array to shuffle
*/
function shuffleArray(myArray) {
for (var i = myArray.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = myArray[i];
myArray[i] = myArray[j];
myArray[j] = temp;
}
return myArray;
}
var $ul, $li, li_content, li_list;
// find all lists to shuffle
$("#quiz_container > ul").each(function () {
$ul = $(this);
li_list = [];
// shuffle only elements that don't have "group" class
$ul.find("li[class!='single_question', 'question', 'title', 'text']").each(function () {
// add content to the array and remove item from the DOM
li_list.push($(this).html());
$(this).remove();
});
// shuffle the list
li_list = shuffleArray(li_list);
while (li_content = li_list.pop()) {
// create <li> element and put it back to the DOM
$li = $("<li />").html(li_content);
$ul.append($li);
}
});
$("#contact_div").show();
});
$(document).on('click', '.single_question .options li', function () {
// Save the question of the clicked option
question = $(this).parents('.single_question');
// Remove If Anyother option is already selected
question.find('.selected').removeClass('selected');
// Add selected class to the clicked li
$(this).addClass('selected');
// selected option value
selected_answer_value = $(this).attr("value");
// Value of correct answer from '.single-question' attribute
correct_answer_value = question.attr("data-correct-answer");
correct_answer_text = question.find('.options').find("li[value='" + correct_answer_value + "']").text();
if (correct_answer_value == selected_answer_value)
result = "<div class='correct'> Correct ! </div>";
else
result = "<div class='wrong'> Correct answer is -> " + correct_answer_text + "</div>";
// Write the result of the question
$(this).parents('.single_question').find('.result').html(result);
// Calculate the score
score_calculator();
});
/**
* It loops through every question and increments the value when "data-correct-answer" value and "option's value" are same
*/
function score_calculator() {
score = 0;
$('.single_question').each(function () {
question = $(this);
if (question.attr('data-correct-answer') == question.find('.selected').attr("value")) {
score++;
}
});
$('.correct_answers').html(score);
}
It looks like you're using jQuery, even though the question isn't tagged as such. If that's the case, you can use a code snippet written by Chris Coyier of CSS-Tricks called shuffle children.
Here's an example of the code in action.
$.fn.shuffleChildren = function() {
$.each(this.get(), function(index, el) {
var $el = $(el);
var $find = $el.children();
$find.sort(function() {
return 0.5 - Math.random();
});
$el.empty();
$find.appendTo($el);
});
};
$("ul.randomized").shuffleChildren();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4>Static List:</h4>
<ul>
<li>First element</li>
<li>Second element</li>
<li>Third element</li>
<li>Fourth element</li>
</ul>
<h4>Randomized List:</h4>
<ul class="randomized">
<li>First element</li>
<li>Second element</li>
<li>Third element</li>
<li>Fourth element</li>
</ul>
In order to apply it to your own code, all you'd need to do is modify the CSS selector at the bottom of the jQuery snippet. In your case, ul.options might be a good choice.
Here are a couple of examples using your markup:
jsFiddle
Self-Contained HTML Doc
Using jQuery, I would like to get each attribute value, insert it into an array and then insert each array into an array.
From this HTML:
<ul>
<li data-bbox="-121,20,-36,30">Item 1</li>
<li data-bbox="-122,30,-46,40">Item 2</li>
<li data-bbox="-123,40,-56,50">Item 3</li>
</ul>
I'm trying to create this type of nested array:
var bboxArray = [
[-121,20,-36,30],
[-122,30,-46,40],
[-123,40,-56,50]
];
...and convert the strings to numbers.
I'm assuming I need to do something like this:
var bboxArray = [];
$('li[data-bbox]').each(function() {
bboxArray.push($(this).attr('data-bbox').split(','));
});
Working Example
While your code does work, it is returning strings instead of the numbers you have in your required output this will do that:
I simply added .map(Number) at the end of your push
$('li[data-bbox]').each(function() {
bboxArray.push($(this).attr('data-bbox').split(',').map(Number));
});
You can use the .map() method like so:
var bboxArray = $('ul > li').map(function() {
return [ $(this).data('bbox').split(',') ];
}).get();
var bboxArray = $('ul > li').map(function() {
return [ $(this).data('bbox').split(',') ];
}).get();
console.log( bboxArray );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li data-bbox="-121,20,-36,30">Item 1</li>
<li data-bbox="-122,30,-46,40">Item 2</li>
<li data-bbox="-123,40,-56,50">Item 3</li>
</ul>
I want to append the <li> from one <ul> to another <ul> that's created on the fly. I want to group the list-items into new sub-lists based on their data-group attribute.
<ul id="sortable1">
<li data-group="A">test</li>
<li data-group="A">test1</li>
<li data-group="B">test2</li>
<li data-group="B">test3</li>
<li data-group="C">test4</li>
</ul>
Basically I'm trying to loop through this list and grap all <li> from each group, and then move it to another <ul>.
This is what I have so far, but I'm not getting the expected results. I have done this in Excel in the past but can't get it to work with jQuery.
var listItems = $("#sortable1").children("li");
listItems.each(function (idx, li) {
var product = $(li);
//grab current li
var str = $(this).text();
if (idx > 0) {
//append li
str += str;
if ($(this).data("group") != $(this).prev().data("group")) {
//I should be getting test and test1.
//but alert is only giving test1 test1.
alert(str);
//need to break into groups
//do something with groups
}
}
});
How about something like this:
$(function() {
var sortable = $("#sortable1"),
content = $("#content");
var groups = [];
sortable.find("li").each(function() {
var group = $(this).data("group");
if($.inArray(group, groups) === -1) {
groups.push(group);
}
});
groups.forEach(function(group) {
var liElements = sortable.find("li[data-group='" + group + "']"),
groupUl = $("<ul>").append(liElements);
content.append(groupUl);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="sortable1">
<li data-group="A">test</li>
<li data-group="A">test1</li>
<li data-group="B">test2</li>
<li data-group="B">test3</li>
<li data-group="C">test4</li>
</ul>
<div id="content">
</div>
I hope I didn't misunderstand you.
I have a list like this:
<ul id="list">
<li>Adam</li>
<li>Alex</li>
...
<li>Zara</li>
</ul>
And it is already alphabetical ordered by this JavaScript:
var mylist = $('#list');
var listitems = mylist.children('li').get();
listitems.sort(function(a, b) {
return $(a).text().toUpperCase().localeCompare($(b).text().toUpperCase());
})
$.each(listitems, function(idx, itm) { mylist.append(itm); });
Now I need to set the list like this:
<ul id="list">
<li id="a"><a name="a" class="title">A</a>
<ul>
<li>Adam</li>
<li>Alex</li>
</ul>
</li>
<li id="b"><a name="b" class="title">B</a>
<ul>
<li>Barry</li>
<li>Becky</li>
</ul>
</li>
...
...
...
<li id="z"><a name="z" class="title">z</a>
<ul>
<li>zavv</li>
<li>zora</li>
</ul>
</li>
</ul>
To use the list in this Apple Style Slider.
Do you know how can I do it with JavaScript?
It would be easiest (I guess) to collect all li elements in an object first (categorized bei their content's initial letter) and then sort those lists separately. Since code says more than a thousand words, here's how I would do that:
var list = { letters: [] }; //object to collect the li elements and a list of initial letters
$("#list").children("li").each(function(){
var itmLetter = $(this).text().substring(0,1).toUpperCase();
if (!(itmLetter in list)) {
list[itmLetter] = [];
list.letters.push(itmLetter);
}
list[itmLetter].push($(this)); //add li element to the letter's array in the list object
});
list.letters.sort(); //sort all available letters to iterate over them
$.each(list.letters, function(i, letter){
list[letter].sort(function(a, b) {
return $(a).text().toUpperCase().localeCompare($(b).text().toUpperCase()); //sort li elements of one letter
});
var ul = $("<ul/>"); //create new dom element and add li elements
$.each(list[letter], function(idx, itm){
ul.append(itm);
});
$("#list").append($("<li/>").append($("<a/>").attr("name", letter.toLowerCase()).addClass("title").html(letter)).append(ul)); //add the list to a new li and to #list ul
});
JSFiddle: http://jsfiddle.net/KnC6M/
Thanks #Aletheios, I updated your solution to make it more efficient solution with the use of css without removing list by $("#list").empty();
Assuming your list is already sorted.
var letters = [];
$("#list").children("li").each(function(i){
var itmLetter = $(this).text().trim().substring(0,1).toUpperCase();
if (letters.indexOf(itmLetter)<0) {
console.log(`${itmLetter} is not in ${letters} and index is ${i}`);
$(`#list li:nth-child(${i+1})`).addClass("AddContent").attr('data-content',itmLetter);
letters.push(itmLetter);
} else {
console.log(`${itmLetter} is in ${letters}`);
}
});
CSS:
#list{
margin-left: 15px;
}
li.AddContent:before {
content: attr(data-content);
margin-left: -15px;
display: block;
}
HTML:
<ul id="list">
<li> Zara</li>
<li> Adam</li>
<li> Alex</li>
<li> Toby</li>
</ul>
JSfiddle: http://jsfiddle.net/KnC6M/105/
I was searching for something similar, I wanted to sort an array in alphabetically grouped manner. Here is my code which is little modified version of #Aletheios code. Hope it helps.
var list = { letters: [] };
var words = {let: ['abc', 'aabbgg', 'cda', 'hello', 'bca']};
$.each(words.let, function(){
var itLetter = this.substring(0,1).toUpperCase();
if(!(itLetter in list)){
list[itLetter] = [];
list.letters.push(itLetter);
}
list[itLetter].push($(this));
});
list.letters.sort();
$.each(list.letters, function(i, letter){
var ul = $("<ul/>");
var li = $('<li/>');
$.each(list[letter], function(idx, itm){
ul.append('<li>'+ itm[0] +'</li>');
console.log(itm);
});
$("body").append($("<li/>").append($("<a/>").attr("name", letter.toLowerCase()).addClass("title").html(letter)).append(ul));
});
Here is the fiddle.
http://jsfiddle.net/checkomkar/x8taqcnk/
I would like to get an array of the values from the data-val attributes of .my-li elements
<ul id="stuff">
<li class='my-li' data-val='1'>
<li class='my-li' data-val='2'>
<li class='my-li' data-val='3'>
<li class='my-li' data-val='4'>
<li class='my-li' data-val='5'>
<ul>
here the result should be [1,2,3,4,5];
anybody knows a good way of doing this ?
Try:
var foo = $('#stuff .my-li').map(function () {
return $(this).data('val');
});
try this simple one.
var array = [];
$('.my-li').each(function(){
array.push($(this).attr('data-val'));
});
alert(array);
fiddle : http://jsfiddle.net/pp5pw/
var foo = $('#stuff .my-li').map(function () {
return $(this).attr('data-val');
});
console.log(foo[0])
jsfiddle goes to http://jsfiddle.net/granjoy/KxQAr/