I'm working on the web page where I want to filter products by taking values from the nav bar using JS, like this:
<nav id="shop-nav" class="nav">
<li> value="1">Something</li>
<li> value="2">Something</li>
<li> value="3">Something</li>
<li> value="4">Something</li>
</nav>
My JS code is:
for (let i = 0; i < categories.length; i++) {
const link = document.createElement('li')
link.innerHTML = categories[i].name
link.value = categories[i].id
nav.appendChild(link)
}
I know that this is possible with <select></select> tag, but I want to do it with the custom nav bar.
Thanks
I ran the code you provided and there is an error having to do with categories. Where is categories coming from? Thanks!
Also, I made a small update in the HTML, below.
Blockquote Uncaught ReferenceError: categories is not defined
for (let i = 0; i < categories.length; i++) {
const link = document.createElement('li')
link.innerHTML = categories[i].name
link.value = categories[i].id
nav.appendChild(link)
}
<nav id="shop-nav" class="nav">
<li value="1">Something</li>
<li value="2">Something</li>
<li value="3">Something</li>
<li value="4">Something</li>
</nav>
I may be misunderstanding please correct me if I am. But if you want to get the values from the navbar, you can use queryselector.
let navBarChildren = document.querySelector("nav[id='shop-nav']").children
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
I am basically trying to check if my submenu has more than five list items, and if it does grab the remaining list item's and place them inside a new ul that is outside of the current parent ul using jquery. it gets complicated because of the structure of the list.
Here is the DOM structure:
<ul id="nav" class="se test">
<li id="menu1" class="page-1307 parent-menu parent">
<div class="nav-inner">
<a class="menulink" id="menuitem1" onclick="return false" href="#">test<span class="toggle"></span></a>
<ul id="ie1" class="plain">
<li class="parent-menu parent">test<span class="toggle"></span>
<div class="submenu-wrapper">
<ul class="plain">
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</div>
</li>
<li class="parent-menu parent">test<span class="toggle"></span>
<div class="submenu-wrapper">
<ul class="plain">
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li id="menu2" class="menulink page-7">
<div class="nav-inner">
test
</div>
</li>
</ul>
Basically i need to grab those remaining list items and place them in a new li.parent-menu.parent that includes the children div.sub-menu-wrapper and the ul.plain. the actual remaining list items would go inside the ul.plain of the new li.parent-menu. i hope thi makes since. i have been stuck on this for a day or two and unble to figure it out. any help would be greatly apprecitated, thank you.
This is what i am striving for, keep in mind it is dynamic.
you can:
Loop all ul in your document
foreach element count children
if found li number under an ul element is > 5
create a new list with the html of the required list
$(document).ready(function(){
$('.submenu-wrapper').each(function(){
var count_li=0;
var i=1;
$(this).children('ul').children('li').each(function(){
count_li++;
if(count_li>5 && i==1){
$(document.body).append('<ul id="newlist"></ul>');
$('#newlist').append($(this).nextUntil($(this).last()).andSelf());
i++;
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul id="nav" class="se test">
<li id="menu1" class="page-1307 parent-menu parent">
<div class="nav-inner">
<a class="menulink" id="menuitem1" onclick="return false" href="#">test<span class="toggle"></span></a>
<ul id="ie1" class="plain">
<li class="parent-menu parent">test<span class="toggle"></span>
<div class="submenu-wrapper">
<ul class="plain">
<li>test11</li>
<li>test12</li>
<li>test13</li>
<li>test14</li>
<li>test15</li>
<li>test16</li>
<li>test17</li>
</ul>
</div>
</li>
<li class="parent-menu parent">test<span class="toggle"></span>
<div class="submenu-wrapper">
<ul class="plain">
<li>test21</li>
<li>test22</li>
<li>test23</li>
<li>test24</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li id="menu2" class="menulink page-7">
<div class="nav-inner">
test
</div>
</li>
</ul>
Here is the final answer I was looking for:
megaMenu: function(){
function addNewList(current, newItems) {
var newList = $('<li class="parent-menu parent newLi">');
var div = $('<div class="submenu-wrapper">');
newList.append(div);
var ul = $('<ul class="plain">');
div.append(ul);
for (var i = 0; i < newItems.length; i++) {
ul.append(newItems[i]);
}
current.after(newList);
return newList;
}
function splitLists() {
var allLists = $(".plain > li.parent-menu");
for (var i = 0; i < allLists.length; i++) {
var currentList = $(allLists[i]);
var items = currentList.find("li");
if (items.length > 5) {
var temp = [];
for (var j = 5; j < items.length; j++) {
temp.push($(items[j]));
if (temp.length == 5) {
currentList = addNewList(currentList, temp);
temp = [];
}
}
if (temp.length > 0) {
currentList = addNewList(currentList, temp);
}
}
}
}
splitLists();
}
After some clarification via comments it seems you are looking for something like this. I have commented the code to explain the logic behind the process:
// function for adding a new LI item.
function addNewList(current, newItems) {
// Create the new li node.
var newList = $('<li class="parent-menu parent">');
// Add the initial a link.
newList.append('test<span class="toggle"></span>');
// Create and append the submenu-wrapper div to our new list item.
var div = $('<div class="submenu-wrapper">');
newList.append(div);
// Create and append the new ul node to our submenu-wrapper div.
var ul = $('<ul class="plain">');
div.append(ul);
// Loop the 5 (or less) items that have been specified and add them to our new list.
for (var i = 0; i < newItems.length; i++) {
// Using append will move the elements that already exist in the original place.
ul.append(newItems[i]);
}
// Add our new list item to the DOM.
current.after(newList);
return newList;
}
// Base function to split the lists as required.
function splitLists() {
// Get all the lists that we want to process.
var allLists = $(".plain > li.parent-menu");
// Loop each list and process.
for (var i = 0; i < allLists.length; i++) {
var currentList = $(allLists[i]);
// Get the sub-items that we need to split.
var items = currentList.find("li");
// We only care about lists that are more than 5 items.
if (items.length > 5) {
// Create array to store the items that we want to move (any after first 5)
var temp = [];
// Start at the 6th item an start moving them in blocks of 5.
for (var j = 5; j < items.length; j++) {
// Add the item to move to our temp array.
temp.push($(items[j]));
// If we have 5 in our temp array then move them to new list.
if (temp.length == 5) {
// Move items with helper function.
currentList = addNewList(currentList, temp);
// Clear the temp array ready for the next set of items.
temp = [];
}
}
// If we have any spare ones that didn't get handle in the length == 5 check, then process them now.
if (temp.length > 0) {
currentList = addNewList(currentList, temp);
}
}
}
}
// Run the process.
splitLists();
Here is a working example
I have a control which allows users to sort the <li> in whatever order they want. when the form submits I want to grab the text inside the <li> for each <li> put into an array, in the order on the form.
<ul id="sortable">
<li class="ui-state-default">
<span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Protective Services
</li>
<li class="ui-state-default">
<span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Engineering Services and Public Works
</li>
</ul>
I am grabbing the <li>'s with:
var ar = [];
ar = document.getElementById("sortable").getElementsByTagName("li");
I then go through the array:
for(i = 0; i < ar.length; i++){
alert(ar[i].text()); //ar[i].anything results in console errors.
}
ar[i] displays [object HTMLLIElement] for every <li> available.
if I try to access the .text/.val/id properties inside the items i get a console error. So I'm assuming this has to do with a parsing/conversion issue?
How do I properly create an array that looks like protective services,Engineering Services and Public Works and NOT like [object HTMLLIElement],[object HTMLLIElement]? Or how do I access my text information from the <li> as a [object HTMLLIElement]?
For a pure javascript solution use the innertext property
alert(ar[i].innerText);
Fiddle: http://jsfiddle.net/3fjursaw/
You need to get the jQuery object in order to use text():
alert($(ar[i]).text());
JSFIDDLE: http://jsfiddle.net/rh6ufn23/1/.
You need to use the properties ar[i].innerText or ar[i].textContent on DOM nodes. The method .text() would be used if you had a jQuery object
var lis = document.getElementById("sortable").getElementsByTagName("li");
var data = [];
for(var i=0; i<lis.length; i++){
data.push(lis[i].innerText);
}
var jsonFormated = JSON.stringify(data);
document.getElementById("log").innerHTML = jsonFormated;
<ul id="sortable">
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Protective Services</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Engineering Services and Public Works</li>
</ul>
<div id="log"></div>
the problem is that you work with the HTMLElement, which is of vanilla js, not jQuery. Try .innerHTML instead of .text()
Use :
var ar = [];
var listItems = $("#sortable li");
listItems.each(function(li) {
ar.push($(this).text());
});
Working here: http://jsfiddle.net/csdtesting/0uddfms6/
jQuery solution:
$('li', '#sortable').each(function(){
alert($(this).text());
});
Or to fix your solution in pure JS:
var ar = [];
ar = document.getElementById("sortable").getElementsByTagName("li");
for (i = 0; i < ar.length; i++) {
alert(ar[i].innerText);
}
See fiddle.
I have a function that adds game results to a schedule.
I want to have the score of a winning team in yellow - add ".winner" class to (<%=score1%> or <%=score2%>).
I wonder what is the correct way to specify needed element, using jQuery.
My current code isn't working. All elements get ".winner" class, regardless of whether a team won or not.
addGame: function(gameInfo) {
var sHtml = window.JST["schedule/gamelist/inner_row"](gameInfo);
var tableRow = $("<tr>").append(sHtml);
tableRow.data("id", gameInfo.id);
return tableRow;
}
addNewTable: function(date, gameInfos, number) {
...
...
for (var ind = 0; ind < gameInfos.length; ++ind) {
gameInfo = gameInfos[ind].attributes;
var element = this.addGame(gameInfo);
$("#schedule_mytable_tbody" + number).append(element);
if (gameInfo.score1 > gameInfo.score2)
$("li:nth-child(5)").find("p:first-child").addClass("winner");
else
$("li:nth-child(5)").find("p:last-child").addClass("winner");
}
My template looks like this.
window.JST["schedule/gamelist/inner_row"] = _.template(
'<td width="668px">\
<ul>\
<li class="schedule_..."></li>\
<li class="schedule_..."></li>\
<li class="schedule_...."></li>\
<li class="schedule_..."></li>\
<li class="schedule_boxscore">\
<p><%=score1%></p>\
<p><%=score2%></p>\
</li>\
...
Rendered HTML part:
<li style="font-size:16px" class="schedule_boxscore">
<p class="winner">2</p>
<p class="winner">10</p>
</li>
So, because of the "for" loop, all paragraphs get the ".winner" class, not just <p class="winner">10</p>...
I know this is a pretty basic question I just seem to be having some issues doing it. I have a HTML structure like below.
<ul>
<li>
<ul class=t2 id=15>
<li class='item'>a<span class='val'>b</span></li>
<li class='item'>c<span class='val'>d</span></li>
<li class='item'>e<span class='val'>f</span></li>
<li class='item'>parameters : </li>
<li>
<ul class=t3 id=16>
<li>
<ul class=t4 id=17></ul>
</li>
<li>
<ul class=t4 id=18></ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
I have the UL with the id of 16 selected and I want to select all its child ul nodes and grab there id. I am able to select the ul with an id of 17 but I cannot grab it's sister node. Here is the JavaScript I am using to get the child nodes.
if (document.getElementById(this.toDelete[i]).getElementsByTagName('ul').length >= 1) {
var tag = document.getElementById(this.toDelete[i]).getElementsByTagName('ul');
for (var k = 0; k <= tag.length; k++) {
console.log("tag name: " + tag[k].id + " these will be pushed to Delete");
}
}
So the logic should be, the the selected UL has child ULs get the ID of those ULs and print them to the console.
The above code does not work. I believe that is because it is grabbing the which does not have a id. But it also if I change it to k < tag.length it works, but still only gets 17 and I want to it get 18 as well.
Please help. Thanks in advance.
UPDATED, full function. the items array is an array of objects with html and id properties, toDelete is an array with just numbers (ids of items to be deleted. The html in items.html corresponds to one line of html. IE 'ab'. The function is a bit of a mess since I am just trying to get it to work properly. I know I can make it cleaner, that is why I did not post the whole function.
deleteItems: function () {
for (var i = 0; i < this.toDelete.length; i++) {
console.log("Item to be deleted: " + this.toDelete[i]);
for (var j = 0; j < this.items.length; j++) {
if (this.items[j].id == this.toDelete[i]) {
this.items[j] = ""; //this should be a slice
if (document.getElementById(this.toDelete[i]).getElementsByTagName('ul').length >= 1) {
var tag = document.getElementById(this.toDelete[i]).getElementsByTagName('ul');
for (var k = 0; k <= tag.length; k++) {
console.log("tag name: " + tag[k].id + " these will be pushed to Delete");
}
this.toDelete.push(document.getElementById(this.toDelete[i]).getElementsByTagName('ul')[0].id);
//check to see if it has those there sister nodes.
}
}
}
}
},
You can use children to get each child node, and then you can check to ensure the found node is a ul by using JavaScript's nodeName. To be extra safe I used toLowerCase() to guarantee that the nodeName looks like ul and not UL
deletedItems();
function deletedItems() {
var ulChildren = document.getElementById('ul16').children;
var childrenLength = ulChildren.length;
alert(childrenLength);
for(var i = 0; i < childrenLength; i++){
if(ulChildren[i].children[0].nodeName.toLowerCase() === 'ul'){
alert("found one, the id is: " + ulChildren[i].children[0].id);
}
}
}
Live Example
Also, I modified your HTML a bit:
<ul>
<li>
<ul class=t2 id=15>
<li class='item'>a<span class='val'>b</span></li>
<li class='item'>c<span class='val'>d</span></li>
<li class='item'>e<span class='val'>f</span></li>
<li class='item'>parameters : </li>
<li>
<ul class="t3" id="ul16">
<li>
<ul class=t4 id="ul17"></ul>
</li>
<li>
<ul class="t4" id="ul18"></ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>