How to get each label and respective li in a div? - javascript

I am having below dynamic generated html div.In that i need to get each label and its respective li items.using that label value i need to call a function.But cant able get each value i am getting same value repeatedly.Someone help me to solve.
Html:
<div class="row extra-attri-div">
<div class="col appendeddiv">
<div class="label-value">
<label class="extraattrlebl" data-extraatt="environment">environment</label>
<div class="value">
<ul id="li-environment">
<li>Suburban</li>
<li>Urban</li>
</ul>
</div>
</div>
</div>
<div class="col appendeddiv">
<div class="label-value">
<label class="extraattrlebl" data-extraatt="income_coarse">income_coarse</label>
<div class="value">
<ul id="li-income_coarse">
<li>Middle Class</li>
<li>Upper Middle Class</li>
<li>Very High Income</li>
</ul>
</div>
</div>
</div>
<div class="col appendeddiv">
<div class="label-value">
<label class="extraattrlebl" data-extraatt="age_coarse">age_coarse</label>
<div class="value">
<ul id="li-age_coarse">
<li>Child</li>
<li>Middle Aged</li>
<li>Older</li>
<li>Younger</li>
</ul>
</div>
</div>
</div>
<div class="col appendeddiv">
<div class="label-value">
<label class="extraattrlebl" data-extraatt="family_stage">family_stage</label>
<div class="value">
<ul id="li-family_stage">
<li>Family Mix</li>
<li>Family Unknown</li>
<li>W/ Kids</li>
<li>W/O Kids</li>
</ul>
</div>
</div>
</div>
<div class="col appendeddiv">
<div class="label-value">
<label class="extraattrlebl" data-extraatt="home_scale">home_scale</label>
<div class="value">
<ul id="li-home_scale">
<li>Low Scale</li>
<li>Medium Scale</li>
<li>Upscale</li>
</ul>
</div>
</div>
</div>
<div class="col appendeddiv">
<div class="label-value">
<label class="extraattrlebl" data-extraatt="education_imputed">education_imputed</label>
<div class="value">
<ul id="li-education_imputed">
<li>Attended Vocational/Tech</li>
<li>Completed College</li>
<li>Completed Graduate School</li>
<li>Completed High School</li>
</ul>
</div>
</div>
</div>
</div>
Jquery:
$('.extra-attri-div').find('.appendeddiv').each(function(i){
console.log("coming"+i);
console.log($(".extraattrlebl").data('extraatt'));
});


Beccause each time you are calling console.log($(".extraattrlebl").data('extraatt')); jQuery finds the first extraattrlebl in the whole document (not just inside the .appendeddiv ) and returns the value of data-extraatt >> environment
You need to fetch inside each .appendeddiv using the .find()
Try this code:
$('.extra-attri-div').find('.appendeddiv').each(function(i){
console.log("coming"+i);
console.log($(this).find(".extraattrlebl").data('extraatt'));
// select the list
let lis = $(this).find("ul li")
// print each li
lis.each(function() {
console.log($(this).text())
});
console.log("\n\n")
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row extra-attri-div">
<div class="col appendeddiv">
<div class="label-value">
<label class="extraattrlebl" data-extraatt="environment">environment</label>
<div class="value">
<ul id="li-environment">
<li>Suburban</li>
<li>Urban</li>
</ul>
</div>
</div>
</div>
<div class="col appendeddiv">
<div class="label-value">
<label class="extraattrlebl" data-extraatt="income_coarse">income_coarse</label>
<div class="value">
<ul id="li-income_coarse">
<li>Middle Class</li>
<li>Upper Middle Class</li>
<li>Very High Income</li>
</ul>
</div>
</div>
</div>
<div class="col appendeddiv">
<div class="label-value">
<label class="extraattrlebl" data-extraatt="age_coarse">age_coarse</label>
<div class="value">
<ul id="li-age_coarse">
<li>Child</li>
<li>Middle Aged</li>
<li>Older</li>
<li>Younger</li>
</ul>
</div>
</div>
</div>
<div class="col appendeddiv">
<div class="label-value">
<label class="extraattrlebl" data-extraatt="family_stage">family_stage</label>
<div class="value">
<ul id="li-family_stage">
<li>Family Mix</li>
<li>Family Unknown</li>
<li>W/ Kids</li>
<li>W/O Kids</li>
</ul>
</div>
</div>
</div>
<div class="col appendeddiv">
<div class="label-value">
<label class="extraattrlebl" data-extraatt="home_scale">home_scale</label>
<div class="value">
<ul id="li-home_scale">
<li>Low Scale</li>
<li>Medium Scale</li>
<li>Upscale</li>
</ul>
</div>
</div>
</div>
<div class="col appendeddiv">
<div class="label-value">
<label class="extraattrlebl" data-extraatt="education_imputed">education_imputed</label>
<div class="value">
<ul id="li-education_imputed">
<li>Attended Vocational/Tech</li>
<li>Completed College</li>
<li>Completed Graduate School</li>
<li>Completed High School</li>
</ul>
</div>
</div>
</div>
</div>

Related

Zurb Foundation table pagination

How can I implement pagination for a table using the Foundation framework?
My table:
<div v-if="accounts && sortedTransactions.length==0">
<h3>No transactions to show</h3>
</div>
<div v-else class="container">
<ul class="responsive-table">
<li class="table-header">
<div class="col col-1">Date</div>
<div class="col col-2">Type</div>
<div class="col col-3">Amount</div>
<div class="col col-4">Description</div>
</li>
<li class="table-row" v-for="transaction of sortedTransactions">
<div class="col col-1" data-label="DATE"> {{transaction.date.slice(0,10)}} </div>
<div :class="[transaction.type === 'CREDIT'? 'col col-2 credit' : ' col col-2 debit']" data-label="TYPE"> {{transaction.type}} </div>
<div :class="[transaction.type === 'CREDIT'? 'col col-3 credit' : ' col col-3 debit']" data-label="AMOUNT"> {{transaction.amount}} </div>
<div class="col col-4" data-label="DESCRIPTION"> {{transaction.description}} </div>
</li>
</ul>
</div>

Easier way to display day.js in multiple locations?

I'm currently studying web development and I'm hoping one of you guys may help.
I'm currently coding the mandatory weather app that everyone and his dog has made lol.
My problem is that on the homepage I have 3 cards displaying with 3 different cities.
I want to display the current date underneath each city by using class="date".
But to do it in 3 instances on the same I've had to use date,date2 and date3. Which I'm thinking a for loop or something similar could easily fix rather than defining it 3 times.
Any help appreciated!
Thanks!
HTML
<section class="row">
<h2> Cities</h2>
<section class="row">
<div class="mb-2 col-xs-12 col-md-6 col-lg-4">
<div class="card">
<h3 class="card-header">
London
</h3>
<div class="card-body">
<p>
<span id="date" class="date">date </span> <br/>
Temp:<span id="temp"></span>
Wind:<span id="wind"></span>
Humid:<span id="humid"></span>
</p>
</div>
</div>
</div>
<div class="mb-2 col-xs-12 col-md-6 col-lg-4">
<div class="card">
<h3 class="card-header">
Birmingham
</h3>
<div class="card-body">
<p>
<span id="date2" class="date">date </span> <br/>
Temp:<span id="temp"></span>
Wind:<span id="wind"></span>
Humid:<span id="humid"></span>
</p>
</div>
</div>
</div>
<div class="mb-2 col-xs-12 col-md-6 col-lg-4">
<div class="card">
<h3 class="card-header">
Wolverhampton
</h3>
<div class="card-body">
<p>
<span id="date3" class="date">date </span> <br/>
Temp:<span id="temp"></span>
Wind:<span id="wind"></span>
Humid:<span id="humid"></span>
</p>
</div>
</div>
</div>
</section>
</div>
<div class="col-xs-12 col-lg-3">
<h2>Search</h2>
<input class="Search col-12 border-radius pb-1" placeholder="Enter City" id="search">
<ul class="list-group mb-2 pb-2">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>
</div>
<div class="col-xs-9 col-lg-9">
<h2 class="subtitle">Results:</h2>
<!--search results class="results-item"-->
</div>
</section>
JavaScript/JQuery
let nowDate = now.format('D / M / YY')
let date = $('#date')
let date2 = $('#date2')
let date3 = $('#date3')
date.text(nowDate);
date2.text(nowDate);
date3.text(nowDate);

jQuery remove text from h1

I have to build a shoppinglist where I can add and delete lists.
On the right side there is the currently opened list with the list headline.
When deleting a list, the headline should disappear, but it doesn´t, neither with empty(), nor remove() or text(' ').
I just edited the post so you can see the whole HTML code
HTML:
<div class="container">
<div class="row">
<div class="col-sm-4">
<div id="shoppinglist">
<div class="header left">
<h2>Listen</h2>
<i class="glyphicon glyphicon-plus newList" ></i>
</div>
<ul class="list lists">
<!-- -->
</ul>
</div>
</div>
<div class="col-sm-8">
<div class="header right">
<i class="glyphicon glyphicon-search"></i>
<i class="glyphicon glyphicon-menu-hamburger"></i>
<img src="img/profile.png" alt="profilbild">
</div>
<div id="listbody">
<div class="listheader">
<!--<h1>List 1</h1>-->
</div>
<div id="listitems">
<div class="items_container">
<!-- -->
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div id="categorylist">
<div class="header">
<h2>Kategorien</h2>
</div>
<ul class="list categories">
<!-- -->
</ul>
</div>
</div>
<div class="col-sm-8">
<div class="header">
<input placeholder="Was willst du Einkaufen?" type="text" />
</div>
<div id="categoryitems">
<div class="items_container">
<!-- -->
</div>
</div>
</div>
</div>
<div id="producthover_container">
<div id='producthover'>
<div id='producthover_icon'>
<i class='glyphicon glyphicon-plus'></i>
</div>
<div id='producthover_detail'>
<span>Details <br> hinzufügen</span>
</div>
</div>
</div>
</div>
list.js:
printHeader(){
$(".listheader").empty();
$(".listheader").append("<h1 class='h1header'>" + this.name + "</h1>");
}
shoppinglist.js:
$(".lists").on("click","i",(e) =>{
let r = confirm("Delete?");
if(r) {
$(".h1header").remove();
$(e.target).parent().remove();
}
});

you have to Remove it from the parent node. like this:
var child = $(".h1header");
$(".listheader").removeChild(child);
or you will have to create a function that does this when given a child node

How to add side panel when using cached pages in Framework7?

I'm working with cached pages, I wrote all pages in a single file index.html.
How to add the side panel to a particular page?
index.html
<body>
<div class="statusbar-overlay"></div>
<div class="views">
<div class="view view-main">
<!-- Navbar -->
<div class="navbar no-border">
<div class="navbar-inner">
<div class="left"></div>
<div class="center sliding">Welcome to Page</div>
<div class="right"></div>
</div>
<div class="navbar-inner cached" data-page="detailsPage">
<div class="left sliding">
<a href="index" class="link back">
<i class="icon icon-back"></i><span>Back</span>
</a>
</div>
<div class="center sliding">Detail page</div>
<div class="right"></div>
</div>
<div class="navbar-inner cached" data-page="loginPage">
<div class="left sliding">
<a href="index" class="link back">
<i class="icon icon-back"></i><span>Back</span>
</a>
</div>
<div class="center sliding">Login</div>
<div class="right"></div>
</div>
<div class="navbar-inner cached" data-page="registerPage">
<div class="left sliding">
<a href="index" class="link back">
<i class="icon icon-back"></i><span>Back</span>
</a>
</div>
<div class="center sliding">Register</div>
<div class="right"></div>
</div>
<div class="navbar-inner cached" data-page="welcome">
<div class="left sliding">
<!-- <a href="index" class="link back">
<i class="icon icon-back"></i><span>Back</span>
</a> -->
</div>
<div class="center sliding">Realmilk</div>
<div class="right"></div>
</div>
</div>
<!-- Pages -->
<div class="pages navbar-through toolbar-through">
<!-- Page 1 -->
<div data-page="index" class="page" ng-controller="IndexPageController">
<!-- Page content-->
<div class="page-content">
Realmilk Login
Register Here
</div>
</div>
<!-- Page 2 -->
<div data-page="detailsPage" class="page cached" ng-controller="DetailPageController">
<!-- Page content-->
<div class="page-content">
This is page 2
</div>
</div>
<!-- Welcome Page-->
<div data-page="welcome" class="page cached" ng-controller="WelcomePageController">
<!-- Page content-->
<div class="page-content">
<div class="card">
<div class="card-content">
<div class="card-content-inner">Welcome to the Realmilk :: {{user_info.firstName}}</div>
</div>
</div>
<style>
.demo-card-header-pic .card-header {
height: 40vw;
background-size: cover;
background-position: center;
}
</style>
<div class="card demo-card-header-pic">
<div style="background-image:url(http://www.google.com/logos/doodles/2015/googles-new-logo-5078286822539264.3-hp2x.gif)" valign="bottom" class="card-header color-white no-border">Journey To Mountains</div>
<div class="card-content">
<div class="card-content-inner">
<p class="color-gray">Enrolled on January 21, 2015</p>
<p>Molabanti Dairy farm is RealMilk certified cattle farm.</p>
</div>
</div>
<div class="card-footer">
Like
Read more
</div>
</div>
</div>
</div>
<!-- Login Page -->
<div data-page="loginPage" class="page cached" ng-controller="LoginPageController">
<!-- Page content-->
<div class="page-content">
<form id="login-form" class="list-block">
<div class="item-content">
<div class="item-inner">
<div class="item-title label">Email</div>
<div class="item-input">
<input type="email" name="emailId" id="emailId" placeholder="Enter Email" ng-model="user.emailId">
</div>
</div>
</div>
<div class="item-content">
<div class="item-inner">
<div class="item-title label">Password</div>
<div class="item-input">
<input type="password" name="password" id="password" placeholder="Enter Password" ng-model="user.password">
</div>
</div>
</div>
</form>
<div class="content-block">
<p>Sign In</p>
</div>
</div>
</div>
<!-- Registration Page -->
<div data-page="registerPage" class="page cached" ng-controller="RegisterPageController">
<!-- Page content-->
<div class="page-content">
<form id="registration-form" class="list-block">
<ul>
<li>
<div class="item-content">
<div class="item-media"><i class="icon f7-icons">persons</i></div>
<div class="item-inner">
<!-- <div class="item-title label">Gender</div> -->
<div class="item-input">
<select id="boom" name="type" ng-model="user.type">
<option value="Retailer">Consumer</option>
<option value="Dairyfarm">Farmer</option>
</select>
</div>
</div>
</div>
</li>
<!-- Text inputs -->
<li>
<div class="item-content">
<div class="item-media"><i class="icon f7-icons">person</i></div>
<div class="item-inner">
<!-- <div class="item-title label">First Name</div> -->
<div class="item-input">
<input type="text" name="first_name" placeholder="First name" ng-model="user.first_name">
</div>
</div>
</div>
</li>
<!-- Text inputs -->
<li>
<div class="item-content">
<div class="item-media"><i class="icon f7-icons">person</i></div>
<div class="item-inner">
<!-- <div class="item-title label">Last Name</div> -->
<div class="item-input">
<input type="text" placeholder="Last name">
</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-media"><i class="icon f7-icons">phone</i></div>
<div class="item-inner">
<!-- <div class="item-title label">Phone</div> -->
<div class="item-input">
<input type="tel" id="phone" name="primary_mobile_number" placeholder="Phone" ng-model="user.primary_mobile_number"/>
</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-media"><i class="icon f7-icons">email</i></div>
<div class="item-inner">
<!-- <div class="item-title label">Email</div> -->
<div class="item-input">
<input type="email" name="email_id" id="email_id" placeholder="Enter Email" ng-model="user.email_id">
</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-media"><i class="icon f7-icons">lock</i></div>
<div class="item-inner">
<!-- <div class="item-title label">Password</div> -->
<div class="item-input">
<input type="password" id="password" name="password" placeholder="Password" ng-model="user.password"/>
</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-media"><i class="icon f7-icons">lock</i></div>
<div class="item-inner">
<!-- <div class="item-title label">Password</div> -->
<div class="item-input">
<input type="password" id="confirmpassword" name="confirmpassword" placeholder="Confirm Password" ng-model="user.confirmpassword"/>
</div>
</div>
</div>
</li>
</ul>
</form>
<div class="content-block">
<p>Register</p>
</div>
</div>
</div>
</div>
</div>
</div>

According to what I see from the documentation.
Add this html syntax after: <div class="statusbar-overlay"></div> or before: <div class="views">...</div>.
CODE SYNTAX:
<div class="panel-overlay"></div>
<div class="panel panel-left panel-reveal">
<div class="content-block">
<p>Left Panel content here</p>
<p>Close me</p>
<p>Open Right Panel</p>
</div>
</div>
Ok, now when you have panels in your App, you need to know how to open/close them:
To open panel we need to add "open-panel" class to any HTML element (prefered to link)
To close panel we need to add "close-panel" class to any HTML element (prefered to link)
If you have two panels in app, such link will open/close Left panel by default
If you want to specify which panel should opened/closed, then it could be done via additional data-panel="left" attribute on this HTML element
Open Panels With Swipe
To make this feature works you need to enable it on App initialization by passing related parameter:
var myApp = new Framework7({
swipePanel: 'left'
});

Fullpage.js sections not working

I recently installed "FullPage.js" to my site. I figured out how to get the slides working but the sections won't for some reason. Can't seem to find anything in the console.
<div class="section" id="section1">
<div class="slide active">
<div class="wrapper">
<span class="line"></span>
<div class="title">HOME</div>
<span class="line2"></span>
<div class="post">
<h1>Hey I'm <strong>Matt Hunzinger</strong></h1><br>
<p>I like making flat designs that <strong>elevate</strong> my client's businesses<br><br><span class="toSlide" data-index="3">Contact Me</span></p> <br> <hr> <br> <br> <br> <br> <br>
<div class="grid">
<span class="toSlide" data-index="2">
<div class="hex" id="about">
<li>About Me</li>
<img src="about.png">
</div>
</span>
<span class="toSlide" data-index="3">
<div class="hex" id="contact">
<img src="email.png">
</div>
</span>
<span class="toSlide" data-index="4">
<div class="hex" id="about">
<li>Work</li>
<img src="about.png">
</div>
</span>
<br>
</div>
</div>
</div>
</div>
</div>
<div class="section" id="section2">
<div class="slide">
<h1> hello all</h1>
</div>
</div>
JS
$(document).ready(function () {
$.fn.fullpage({
resize: false
});
});

Categories