Loop through list and create a <li> elements - javascript

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>');
}

Related

JQuery - Change className with logic conditions

I am looking for modifying the class name of a div according to the name of another div.
I cannot make it work with JQuery.
Here is the html structure :
<div class="div-overlay">
<a class="image" href="https://www.example.net/page-events/" target="_blank"></a>
<div class="div-container">
<ul class="post-categories">
<li>
Events
</li>
</ul>
</div>
<div class="div-overlay">
<a class="image" href="https://www.example.net/page-conferences/" target="_blank"></a>
<div class="div-container">
<ul class="post-categories">
<li>
Conferences
</li>
</ul>
</div>
My goal is to modify the :
class="div-overlay"
According to the text value in :
class="category-item"
My attempt is not successful :
$(document).ready(function(){
var category = $(".category-item").html();
var newEvents = $(".div-overlay").attr('newclass','events');
var newConferences = $(".div-overlay").attr('newclass','conferences');
if (category = "Events"){
newEvents;
} else if (category = "Conferences") {
newConferences;
};
});
How can I make my script work ?
Details : working on Wordpress with elementor.
You can try this code :
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".category-item").each(function() {
var cat_val = $(this).html();
$(this).parents('.div-overlay').attr('newClass', cat_val);
});
});
</script>
</head>
<body>
<div class="div-overlay">
<a class="image" href="https://www.example.net/page-events/" target="_blank"></a>
<div class="div-container">
<ul class="post-categories">
<li>
Events
</li>
</ul>
</div>
</div>
<div class="div-overlay">
<a class="image" href="https://www.example.net/page-conferences/" target="_blank"></a>
<div class="div-container">
<ul class="post-categories">
<li>
Conferences
</li>
</ul>
</div>
</div>
</body>
</html>
You should use addClass methd
$(document).ready(function(){
var category = $(".category-item").html();
if (category = "Events"){
$(".div-overlay").addClass('events');
} else if (category = "Conferences") {
$(".div-overlay").addClass('conferences');
};
});

Bi-directional highlighting of elements with same class

I have 2 lists of items. One is an ordinary <ul> and the other is a grid of images wrapped in <div>s.
I am looking to highlight the item hovered on both lists that will work in both directions.
So if I hover over <li>Apple, both the <li>Apple & <div>Apple get highlighted. And this should also work in the other direction, if I hover over the <div>Apple, both the <div>Apple and <li>Apple is highlighted.
Notes:
I am able to add the unique class name to any element. Either the <li> & <div> or the <a> within.
Highlighting can be either as an .active class or inline styling.
Similar to the below question but works in both directions:
Jquery 'Highlight' element with the same class
<ul>
<li class="app-hover-select">
<a class="item-1" href="">Apples</a>
</li>
<li class="app-hover-select">
<a class="item-2" href="">Pears</a>
</li>
<li class="app-hover-select">
<a class="item-3" href="">Bananas</a>
</li>
<li class="app-hover-select">
<a class="item-4" href="">Pineapples</a>
</li>
</ul>
<div class="wrapper">
<div class="app-hover-select">
<a class="item-1" href="">
<img scr="">
Apples
</a>
</div>
<div class="app-hover-select">
<a class="item-2" href="">
<img scr="">
Pears
</a>
</div>
<div class="app-hover-select">
<a class="item-3" href="">
<img scr="">
Bananas
</a>
</div>
<div class="app-hover-select">
<a class="item-4" href="">
<img scr="">
Pineapples
</a>
</div>
</div>
My current jQuery with current HTML:
jQuery('.app-hover-select > a').hover(function() {
var appClass = jQuery(this).attr("class");
jQuery(appClass).toggleClass('active');
});
My logic is:
On hover of .app-hover-select > a
var appClass = Get the class
Add class active to all elements with the class appClass
In case you want this:
Try this-
jQuery(".app-hover-select > a").hover(function () {
const listOfItems = this.parentElement.parentElement;
const listItem = this.parentElement;
const i = Array.from(listOfItems.children).indexOf(listItem);
jQuery("ul .app-hover-select").each((_i, el) => {
if (_i === i) {
el.classList.add("active");
} else {
el.classList.remove("active");
}
});
jQuery(".wrapper .app-hover-select").each((_i, el) => {
if (_i === i) {
el.classList.add("active");
} else {
el.classList.remove("active");
}
});
});

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 do I loop through li's read part of a url then add that as a class to the li with Jquery

Hi I need some help with this.
Heres my code:-
<ul class="product nobullet clearfix nomargin">
<li class="product1">
<div class="img-holder">
<a href="/Mens/Shower/Bodywash/p/704357">
<img src="/medias/sys_master/front/src/8838871056414.jpg"/>
</a>
</div>
</li>
<li class="product2">
<div class="img-holder">
<a href="/Mens/Shower/shampoo/p/704357">
<img src="/medias/sys_master/front/src/8838871056414.jpg"/>
</a>
</div>
</li>
<li class="product3">
<div class="img-holder">
<a href="/Mens/toiletries/deoderant/p/704357">
<img src="/medias/sys_master/front/src/8838871056414.jpg"/>
</a>
</div>
</li>
<ul>
<script>
$('ul.product').children().has("li").each(function(){
var url = $(this).find('div.img-holder a').attr('href');
url = url.split("/");
alert(url);
$(this).children("li").addClass(url[3]);
});
</script>
It doesn't work I'm still new to jquery and could do with some help.
I need to read each product class li's read the url take the 3 item using / as asperator then add this to the li class. The code needs to loop through all the product li's
There can be upto 20 product classes all start with product then have a number at the end e.g. product1
Not sure if i've explained theat well enough so....
After the jquery code runs the html should look like this:-
<ul class="product nobullet clearfix nomargin">
<li class="product1 bodywash/">
<div class="img-holder">
<a href="/Mens/Shower/bodywash/p/704357">
<img src="/medias/sys_master/front/src/8838871056414.jpg"/>
</a>
</div>
</li>
<li class="product2 shampoo">
<div class="img-holder">
<a href="/Mens/Shower/shampoo/p/704357">
<img src="/medias/sys_master/front/src/8838871056414.jpg"/>
</a>
</div>
</li>
<li class="product3 deoderant">
<div class="img-holder">
<a href="/Mens/toiletries/deoderant/p/704357">
<img src="/medias/sys_master/front/src/8838871056414.jpg"/>
</a>
</div>
</li>
<ul>
Check this
As you are iterating over li's you just need to use $(this).addClass(url[3]);
$('ul.product li').each(function(){
var url = $(this).find('div.img-holder a').attr('href');
url = url.split("/");
alert(url);
$(this).addClass(url[3]);
});
Nitin's answer is almost correct.
Firstly since you're new to jQuery it's worth explaining that your selector isn't matching <li>s like you think it is
$('ul.product').children().has("li")
Will match any children of the ul which have a descendant which is an <li>. Since the list items are the children of the list they themselves will not have list items as children.
$('ul.product li').each(function(){
var url = $(this).find('div.img-holder a').attr('href');
url = url.split("/");
alert(url);
$(this).addClass(url[3]);
});
With reference to this code ^ it's worth noting that JavaScript is a zero-based language. So you'll want to use url[2] to get the third item in that array

How do I retrieve text from a span tag inside a selected href tag?

I'm trying to retrieve the text from a span elementinside a selected href tag. Here is my HTML from a previous example:
<ul class="thumbnails">
<li>
<a href="#" class="thumbnail">
<img class="giftthumb" src='thumb1.jpg' alt="">
<span class="gifttitle">Thumb1</span>
</a>
</li>
<li>
<a href="#" class="thumbnail">
<img class="giftthumb" src='thumb2.jpg' alt="">
<span class="gifttitle">Thumb2</span>
</a>
</li>
<li>
<a href="#" class="thumbnail">
<img class="giftthumb" src='thumb3.jpg' alt="">
<span class="gifttitle">Thumb3</span>
</a>
</li>
</ul>
<input type="button" class="btn btn-success" value="Test" id="capture"/>
My jQuery looks like this
$('#capture').click(function(e) {
e.preventDefault();
var test = $(".highlight .gifttitle").text();
alert("TEXT " + test);
});
Once an item is selected I add a class called: 'highlight'
You just a need a simple class selector:
var test = $(".gifttitle.highlight").text();
var test = $('.highlight > .gifttitle').text();
You shold change your code to:
$('#capture').click(function(e) {
e.preventDefault();
// var test = $(".gifttitle", this).text();
alert("TEXT " + test);
});
The :selected pseudoclass is not applied to span elements.
The $(". gifttitle ", this) means select the element with class gifttitle in current element.

Categories

Resources