Develop Reference

Loop through list and create a <li> elements

I have a <ul> list in html as follows:
<ul data-role="listview" data-filter="true" data-input="#element">
<li><a href="">
<div class="item">
<h3>getting up</h3>
<div>
<h6>from bed</h6>
<h6>09:00</h6>
</div>
</div>
</a></li>
<li><a href="">
<div class="item">
<h3>brushing</h3>
<div>
<h6>with brush</h6>
<h6>09:30</h6>
</div>
</div>
</a></li>
<li><a href="">
<div class="item">
<h3>COFFEE </h3>
<div>
<h6>nescafe</h6>
<h6>10:30</h6>
</div>
</div>
</a></li>
<li><a href="">
<div class="item">
<h3>office</h3>
<div>
<h6>work</h6>
<h6>4hours</h6>
</div>
</div>
</a></li>
<li><a href="">
<div class="item">
<h3>LUNCH</h3>
<div>
<h6>canteen</h6>
<h6>1hour</h6>
</div>
</div>
</a></li>
<li><a href="">
<div class="item">
<h3>office</h3>
<div>
<h6>work</h6>
<h6>4hours</h6>
</div>
</div>
</a></li>
<li><a href="">
<div class="item">
<h3>dinner</h3>
<div>
<h6>home</h6>
<h6>11hours</h6>
</div>
</div>
</a></li>
</ul>
I want to do the following:
Create <ul> element, the append to <li> section
Loop through the list, and append created <li> to <ul> element?
(creating array and converting to string is good choice but unable to implement)
Can anyone help me through this?

Try something like this:
Add id "list-test" to the list:
<ul id="list-test" data-role="listview" data-filter="true" data-input="#element">
Add a button to test:
<button id="anchor-test" href="#">Add Element</button>
And try this script (with comments) to start off with:
$("#anchor-test").on("click", function (event) {
event.preventDefault();
// Create li element, with class
var liTag = $("<li>", { "class": "test-class" });
// Create anchor element, with blank href
var aTag = $("<a>", { "href": "" });
// Create div element, with class "item"
var itemTag = $("<div>", { "class": "item" });
// Define some text
var txt_one = "rest test";
var txt_two = "play test";
// Insert html, including defined text, into div element
itemTag.html("<h3>office test</h3><div><h6>" + txt_one + "</h6><h6>" + txt_two + "</h6></div>");
// Add div (with html) to anchor, and anchor to li element
liTag.append(aTag.append(itemTag));
// Add whole li element to the list
$("#list-test").append(liTag);
});
Clicking the button will add the defined li element. Hope it helps.

i tried this things
var sessionsList = "<div>emptylist</div>";
var myElement = document.getElementById("#mysessioname");
var view = $(sessionsList );
view.empty();
$(noSessionsCachedMsg).appendTo(view);
var sessionsListSelector = $("#myElement").append('<ul data-role="listview" data-filter="true" data-input="#element"></ul>').find('ul');
for (var i = 0; i < 10; i++)
{
// enter code here
sessionsListSelector.append('<li>something</li>');
}

jquery - not able to display the needed content with the function

I have this jQuery script that I do not fully understand. I was wondering why I cannot replace the siblings('div') with a class or id? I think my code doesn't work properly. What I was trying to do is replace some content with a button click, and then the second content, replace it again with the second function.
All courses get replaced by faculties, but faculties dont get replaced by the departments, when I press on a department, they all show one under another
$(document).ready(function() {
$('.btnClick').on('click', function() {
var faculty_id = $(this).attr('id');
$('#' + faculty_id + '_tab').show().siblings('div').hide();
});
$('.btnClick2').on('click', function() {
var department_id = $(this).attr('id');
$('#' + department_id + '_tab').show().siblings('div').hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-3">
<div class="jumbotron">
<h4>Search courses</h4>
<hr>
<br>
<ul>
<li class="btnClick" id="fac_1">Faculty of Mathematics and Informatics</li>
<ul>
<li class="btnClick2" id="dep_1">Mathematics and Informatics</li>
<ul>
<li>Informatics</li>
<li>Mathematics</li>
</ul>
</ul>
<li class="btnClick" id="fac_2">Faculty of Medicine</li>
<ul>
<li class="btnClick2" id="dep_2">Medicine</li>
<ul>
<li>Medical Sciences</li>
</ul>
</ul>
</ul>
</div>
</div>
<div class="col-md-9">
<div class="jumbotron">
<div>
<h3>All courses</h3>
<ul>
<li>
<a class="first" href=artificial-intelligence>Artificial Intelligence</a>
</li>
<li>
<a class="first" href=software-engineering>Software Engineering</a>
</li>
<li>
<a class="first" href=surgery>Surgery</a>
</li>
</ul>
</div>
<div id="fac_1_tab" style="display:none;">
<h3> Faculty of Mathematics and Informatics courses</h3>
<ul>
<li>
<a class="first" href=artificial-intelligence>Artificial Intelligence</a>
</li>
<li>
<a class="first" href=software-engineering>Software Engineering</a>
</li>
</ul>
</div>
<div id="fac_2_tab" style="display:none;">
<h3> Faculty of Medicine courses</h3>
<ul>
<li>
<a class="first" href=surgery>Surgery</a>
</li>
</ul>
</div>
<ul>
<div id="dep_1_tab" style="display:none;">
<h3>Department of Mathematics and Informatics courses</h3>
<ul>
<li>
<a class="first" href=artificial-intelligence>Artificial Intelligence</a>
</li>
<li>
<a class="first" href=software-engineering>Software Engineering</a>
</li>
</ul>
</div>
</ul>
<ul>
<div id="dep_2_tab" style="display:none;">
<h3>Department of Medicine courses</h3>
<ul>
<li>
<a class="first" href=surgery>Surgery</a>
</li>
</ul>
</div>
</ul>
</div>
</div>
</div>
Here is also the full code in django if helps: https://pastebin.com/y9tHNbax

Department cannot replace each other because they are not siblings. they are exist different ul. if all Department are same ul it work proparly
check it. it works as your need
jsfiddle link
$(document).ready(function () {
$('.btnClick').on('click', function () {
$('.col-md-9').find('[id^="dep"]').hide()
var faculty_id = $(this).attr('id');
$('#' + faculty_id + '_tab').show().siblings('div').hide();
});
$('.btnClick2').on('click', function () {
var department_id = $(this).attr('id');
$('#fac_' + department_id.split('_')[1] + '_tab').show().siblings('div').hide();
$('#' + department_id + '_tab').show().siblings('div').hide();
});
});

I am not sure I completely understand your question
but you can try this
$(document).ready(function () {
$('.btnClick').on('click', function () {
$('.col-md-9').find('[id^="dep"]').hide()
var faculty_id = $(this).attr('id');
$('#' + faculty_id + '_tab').show().siblings('div').hide();
});
$('.btnClick2').on('click', function () {
$('.col-md-9').find('[id^="fac"]').hide()
$('.col-md-9').find('[id^="dep"]').hide()
var department_id = $(this).attr('id');
$('#' + department_id + '_tab').show().siblings('div').hide();
});
});

How to get the innerHTML/innerText from a related node of a clicked element?

I would like to get a certain innerText from a clicked element in a HTML document that I clicked.
The corresponding HTML looks something like this:
!DOCTYPE html>
<html>
<head>
<title>Some title</title>
</head>
<body>
<ul class="categories">
<li>
<a href="http://www.example2.com/1">
<div>
<img src="http://www.example.com/someSource">
<span>First</span>
</div>
</a>
</li>
<li>
<a href="http://www.example2.com/1">
<div>
<img src="http://www.example.com/someSource">
<span>Second</span>
</div>
</a>
</li>
</ul>
</body>
</html>
A Javascript function should return either "First" or "Second" depending on the clicked link.
My basic idea is to add an event listener and use the returned event to get the content of the span element:
function(){
document.addEventListener('click', function(e) {
e = e || window.event;
var spanText= e.path[i].innerText; //Don't know how to assign i correctly
return spanText;
}, false);
}
My problem is that I don't know how to define i or if there is something more suitable than .path[i] to work with. Depending on whether I click the image or the text.

Add the click events to the list items
in the handler, retrieve the 'span' child and get its text
var lis = document.querySelectorAll('.categories li');
lis.forEach(function(el) {
el.addEventListener('click', onClick, false);
})
function onClick(e) {
var li = e.currentTarget;
var span = li.querySelector('span');
console.log(span.innerText);
}
<ul class="categories">
<li>
<a href="http://www.example2.com/1">
<div>
<img src="http://www.example.com/someSource">
<span>First</span>
</div>
</a>
</li>
<li>
<a href="http://www.example2.com/1">
<div>
<img src="http://www.example.com/someSource">
<span>Second</span>
</div>
</a>
</li>
</ul>

function init(){
document.addEventListener('click', function(e) {
var link = e.target.closest('a');
if(!link)return;
e.preventDefault();
var text = link.textContent;
alert(text);
return spanText;
});
}
init();

You can check what concrete element was clicked and then return its text. if you want to have some additional information - use data- attributes and read target.dataset to read it.
document.addEventListener('click', function(e) {
var target = e.target;
if(target.tagName === 'SPAN') {
console.log(target.innerText);
return target.innerText;
}
}, false);
<ul class="categories">
<li>
<a href="#">
<div>
<img src="http://www.example.com/someSource">
<span>First</span>
</div>
</a>
</li>
<li>
<a href="#">
<div>
<img src="http://www.example.com/someSource">
<span>Second</span>
</div>
</a>
</li>
</ul>

If the structure is consistent, then there will always be the same number of <span> elements as <a> elements.
Consequently, if you know the user just clicked on the second <a>, you'll know the <span> you need to return is the second <span>.
Working Example:
var links = document.querySelectorAll('li a');
var spans = document.querySelectorAll('li div span');
function getTextContent(e) {
e.preventDefault();
var linksArray = Array.prototype.slice.call(links);
var index = linksArray.indexOf(this);
console.log(spans[index].textContent);
}
links.forEach(function(link){
link.addEventListener('click', getTextContent, false);
});
<ul class="categories">
<li>
<a href="http://www.example2.com/1">
<div>
<img src="http://www.example.com/someSource">
<span>First</span>
</div>
</a>
</li>
<li>
<a href="http://www.example2.com/1">
<div>
<img src="http://www.example.com/someSource">
<span>Second</span>
</div>
</a>
</li>
</ul>

Sorry for my bad language..
I'm late to reply.
Maybe it will help someone else;
window.addEventListener("click", (event) => { //dblclick
let div = event.target.innerText; // <-- the code you want
window.onClick(div);
});
And..
function onClick(div) {
console.log(`(Tıklandı-Clicked) innerText: ${div}`);
}
the code you want : let div = event.target.innerText;

How to filter a product is in multiple category?

The objective is, I have some products and each product is under multiple categories. Initially I list all product and I need to filter by jQuery. I've tried the following method but it seems not working. can anyone tell me how can I achieve this ?
<section class="container">
<ul class="filters">
<li><a href="" class="nav-filter" data-filters='{"filterObject": [{"items": "hdtv,usb-30"}]}'>HD TV</a></li>
<li><a href="" class="nav-filter" data-filters='{"filterObject": [{"items": "hdtv,android-tv"}]}'>FULL-HD</a></li>
<li><a href="" class="nav-filter" data-filters='{"filterObject": [{"items": "android-tv,usb-30"}]}'>USB 3.0</a></li>
<li><a href="" class="nav-filter" data-filters='{"filterObject": [{"items": "hdtv,full-hd"}]}'>Android</a></li>
</ul>
<div id="products">
<div class="items" data-filter='hdtv,usb-30'>
<h2>I am HDTV haing usb 3.0</h2>
</div>
<div class="items" data-filter='hdtv,android-tv'>
<h2>I am HDTV but a android tv</h2>
</div>
<div class="items" data-filter='android-tv,usb-30'>
<h2>I am android tv</h2>
</div>
<div class="items" data-filter='hdtv,full-hd'>
<h2>I am a HDTV and full HD tv</h2>
</div>
</div>
</section>
This is my jQuery
$(document).ready(function(){
$(".nav-filter").click(function(e){
e.preventDefault();
$(".items").hide();
_ = $(this);
filteritem = _.data("filters");
if(_.attr("data-status")=="active"){
_.attr("data-status","");
_.removeClass("active");
}else{
_.attr("data-status","active")
_.addClass("active");
}
count = 0;
$( ".filters" ).find("li").each(function() {
elem = $(this).find("[data-status='active']");
item_show = elem.data("filters");
item = item_show.filterObject[0].items.split(",");
debugger;
if(typeof item_show === "undefined"){ count++; }
if(count == $( ".filters" ).find("li").length){ $(".items").show(); }
else{
$("#products").find("div").each(function(){
in_Array = $(this).data("filter").split(",");
if((item[0]==in_Array[0] || item[1]==in_Array[1]) || (item[0]==in_Array[1] || item[1]==in_Array[0])){
//$(this).show();
}
});
}
});
});
});

You can implement a filter logic like
var $items = $('#products .items').each(function() {
var values = $(this).data('filter').split(/\s*,\s*/);
$(this).data('array-filters', values);
});
$('.filters li:has([data-filters])').click(function() {
var filters = $(this).data('array-filters');
var $selected = $items.filter(function() {
var values = $(this).data('array-filters');
return values.some(function(value) {
return filters.indexOf(value) > -1;
});
});
$selected.show();
$items.not($selected).hide();
return false;
}).each(function() {
var filters = $(this).find('a').data('filters').filterObject[0].items;
filters = filters.split(/\s*,\s*/);
$(this).data('array-filters', filters);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="container">
<ul class="filters">
<li><a href="" class="nav-filter" data-filters='{"filterObject": [{"items": "hdtv,usb-30"}]}'>HD TV</a>
</li>
<li><a href="" class="nav-filter" data-filters='{"filterObject": [{"items": "hdtv,android-tv"}]}'>FULL-HD</a>
</li>
<li><a href="" class="nav-filter" data-filters='{"filterObject": [{"items": "android-tv,usb-30"}]}'>USB 3.0</a>
</li>
<li><a href="" class="nav-filter" data-filters='{"filterObject": [{"items": "hdtv,full-hd"}]}'>Android</a>
</li>
</ul>
<div id="products">
<div class="items" data-filter='hdtv,usb-30'>
<h2>I am HDTV haing usb 3.0</h2>
</div>
<div class="items" data-filter='hdtv,android-tv'>
<h2>I am HDTV but a android tv</h2>
</div>
<div class="items" data-filter='android-tv,usb-30'>
<h2>I am android tv</h2>
</div>
<div class="items" data-filter='hdtv,full-hd'>
<h2>I am a HDTV and full HD tv</h2>
</div>
</div>
</section>

Can you please try the following
$(document).ready(function () {
$(".nav-filter").click(function (e) {
e.preventDefault();
$(".items").hide();
_ = $(this);
var filteritem = _.data("filters");
var item = filteritem.filterObject[0].items.split(',');
$("#products").find("div").each(function () {
for (var i = 0; i < item.length; i++) {
if ($(this).data("filter").indexOf(item[i]) >= 0) {
$(this).show();
}
}
});
});
});
Fiddler

Count the number of displayed elements in a HTML list

I have a list of list items which are display: none by default. I programmatically change a certain number of them to list-items.
I've been trying to use querySelectorAll but when I try:
document.querySelectorAll("#ulname style[display*='list-item']")
it returns an empty array (I know it is at least one).
Ideas on how to modify my selectors or another approach? I would like to know after the fact how many items are displayed.

var liList = document.getElementById("myul").getElementsByTagName("li");
var largo = liList.length
alert(largo);
WHERE "myul" is the id of the list and largo is number of li items
<ul id="myul">
<li>hello</li>
<li>world</li>
</ul>
the alert would be 2
<ul id="myul">
<li>hello</li>
<li>world
<ul>
<li>here we are</li>
<ul>
</li>
</ul>
the alert would be 3

var ul = document.getElementById("myul");
var liNodes = [];
for (var i = 0; i < ul.childNodes.length; i++) {
if (ul.childNodes[i].nodeName == "LI") {
liNodes.push(ul.childNodes[i]);
}
}
totalLis = liNodes.length;
Adding text to your ul tag
var txt = document.createTextNode("gsdgds");
ul.appendChild(txt);
Adding li tag to your ul tag
var txt = "<li>dsgdsgs</li>";
ul.innerHTML(txt);

<!DOCTYPE html>
<html>
<body onload="myFunction()">
<p>Maybe this answer can help. I improvise for this after a few days of testing. This is what I got. Hope it helps you.</p>
<li class="sidenav-item open active">
<a href="#" class="sidenav-link sidenav-toggle" ></i>
<div class="text-white">Hi, There!
<div class="badge badge-primary" id="ul-me"></div></div>
</a>
<ul class="sidenav-menu" id="ul1">
<li class="sidenav-item active">
<a href="#" class="sidenav-link" >
<div class="text-white" >Home</div>
</a>
</li>
<li class="sidenav-item" id="ul2">
<a href="#" class="sidenav-link" >
<div class="text-white" >Blog</div>
</a>
</li>
<li class="sidenav-item" id="ul3">
<a href="#" class="sidenav-link" >
<div class="text-white" >Downloads</div>
</a>
</li>
<li class="sidenav-item" id="ul4">
<a href="#" class="sidenav-link" >
<div class="text-white" >Contact</div>
</a>
</li>
<li class="sidenav-item" id="ul5">
<a href="#" class="sidenav-link" >
<div class="text-white" >About</div>
</a>
</li>
</ul>
</li>
'''
<!-- Count Item (li) in <ul> -->
<script>
function myFunction() {
var mylist = [document.getElementById("ul1"), ("ul2"), ("ul3"), ("ul4"), ("ul5")];
document.getElementById("ul-me").innerHTML = mylist.length;
}
</script>
</body>
</html>