I have a div like this:
<div class="configurator-item">
<ul>
<li class="banner-list-img" data-price="122"></li>
</ul>
</div>
Inside this div I have added another div using jQuery:
Here's the jQuery:
jQuery('li.banner-list-img').prepend(jQuery('<div class="show-price"> </div>'));
After I run this jQuery a div is added:
<div class="configurator-item">
<ul>
<li class="banner-list-img" data-price="122">
<div class="show-price"> </div>
</li>
</ul>
</div>
Now I'm trying to get the value of data-price attribute to show inside the div(with class show-price with this jQuery:
jQuery('.banner-list-img').each(function() {
var itemprice = jQuery(this).text();
jQuery('.show-price').html(itemprice);
})
But this is not working. It should show something like this:
<div class="configurator-item">
<ul>
<li class="banner-list-img" data-price="122">
<div class="show-price"> 122 </div>
</li>
</ul>
</div>
How can I do like this.
You could use jQuery.data() to get the data attribute and .find() to only update the element with show-price class which is descendant:
jQuery('li.banner-list-img[data-price]').prepend(jQuery('<div class="show-price"> </div>'));
jQuery('.banner-list-img[data-price]').each(function() {
jQuery(this).find('.show-price').html(jQuery(this).data('price'));
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="configurator-item">
<ul>
<li class="banner-list-img" data-price="122"></li>
<li class="banner-list-img" data-price="123"></li>
<li class="banner-list-img" data-price="124"></li>
<li class="banner-list-img"></li>
</ul>
</div>
And this could be improved doing the prepend with the data value all in one go:
jQuery('.banner-list-img[data-price]').each(function() {
jQuery(this).prepend(jQuery('<div class="show-price">' + jQuery(this).data('price') + '</div>'));
})
.banner-list-img[data-price="0"] .show-price {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="configurator-item">
<ul>
<li class="banner-list-img" data-price="122"></li>
<li class="banner-list-img" data-price="123"></li>
<li class="banner-list-img" data-price="124"></li>
<li class="banner-list-img"></li>
<li class="banner-list-img" data-price="0"></li>
</ul>
</div>
You can use simply this code
$(".button").click(function(){
alert("Value: " + $(".show-price").val());
});
You this in click event is referring to button only.
So you have to do something like this
jQuery('.button').click(function() {
var itemprice = jQuery('.banner-list-img').attr('data-price');
jQuery('.show-price').html(itemprice);
})
Above code only works for one li element. If there are multiple li elements you should use this code
jQuery('.button').click(function() {
jQuery('.banner-list-img').each(function() {
var itemprice = jQuery(this).attr('data-price');
jQuery(this).children('.show-price').html(itemprice);
})
})
After updating question
jQuery('.banner-list-img').each(function() {
var itemprice = jQuery(this).attr('data-price');
jQuery(this).children('.show-price').html(itemprice);
})
Or more better way for your example
jQuery('.banner-list-img').each(function() {
jQuery(this).prepend('<div class="show-price">' + jQuery(this).attr('data-price') + '</div>');
})
Here we are adding HTML when prepending div inside li
Related
So I have multiple LI's like below as it's a menu and I am trying to create a drop-down but for some reason, my jQuery code is not working. Can someone help me?
FYI I can't change HTML as it's dynamically generating in Shopify. I can only change jQuery and CSS
<li class="grid__item lvl-1 ">
<a class="site-nav lvl-1 light-body">Furry Artist</a>
<ul class="subLinks inactive">
<li class="lvl-2">
Erdbeer Joghurt
</li>
<li class="lvl-2">
Jeson RC
</li>
</ul>
</li>
$( document ).ready(function() {
$("ul.subLinks").addClass("inactive");
});
$('a.site-nav.lvl-1').click(function() {
$(this).find("ul.subLinks").toggleClass('active-drop-down');
});
.inactive {
display:none;
}
.active-drop-down {
display:block !important;
}
Your issue is $(this).find... in the a click handler - at this point, this is the a.
.find() looks at the selectors children - but the menu is not a child of the a, it's a sibling.
Change to
$(this).closest("li").find("ul.subLinks"...
(maybe $(this).next().toggleClass... with a caveat on .this() that it's always the very next element).
Updated snippet:
$('a.site-nav.lvl-1').click(function() {
$(this).closest("li").find("ul.subLinks").toggleClass('active-drop-down');
});
.inactive {
display:none;
}
.active-drop-down {
display:block !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ol>
<li class="grid__item lvl-1 ">
<a class="site-nav lvl-1 light-body">Furry Artist</a>
<ul class="subLinks inactive">
<li class="lvl-2">
Erdbeer Joghurt
</li>
<li class="lvl-2">
Jeson RC
</li>
</ul>
</li>
</ol>
What I need is that, when loading the site, move the li element into the ul element based on the datta attr. I did it, but for some reason, it doesn't work.
<li class="classeul_name" data-nivelpai="BR04ZJCTF000">Nivel 1</li>
<li class="classeul_name" data-nivelpai="BR055XCTF003">Nivel 2</li>
<ul data-geral1="BR04ZJCTF000">
</ul>
<ul data-geral1="BR055XCTF003">
</ul>
jQuery
$(window).on("load", function(){
// Joga o nível 2
liName = $('.classeul_name').data('nivelpai');
$('li[data-nivelpai="'+liName+'"]').appendTo($('ul[data-geral1="'+liName+'"]'));
});
Instead on window load event you need to use the dom ready event:
$(function () { .... });
Moreover you need to loop on elements (i.e. .each()) and append() element.
The snippet:
$('.classeul_name').each(function(idx, ele) {
var newPlace = '[data-geral1="' + ele.dataset.nivelpai + '"]';
$(newPlace).append(ele)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li class="classeul_name" data-nivelpai="BR04ZJCTF000">Nivel 1</li>
<li class="classeul_name" data-nivelpai="BR055XCTF003">Nivel 2</li>
<ul data-geral1="BR04ZJCTF000">
</ul>
<ul data-geral1="BR055XCTF003">
</ul>
Putting li out of ul isn't valid HTML. I think it is better to do this work in server side. However you need to loop through every li and append it to relevant ul.
$(function(){
$('.classeul_name').each(function(){
$(this).appendTo($('ul[data-geral1="'+$(this).data('nivelpai')+'"]'));
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li class="classeul_name" data-nivelpai="BR04ZJCTF000">Nivel 1</li>
<li class="classeul_name" data-nivelpai="BR055XCTF003">Nivel 2</li>
<ul data-geral1="BR04ZJCTF000">
</ul>
<ul data-geral1="BR055XCTF003">
</ul>
Also you can use .append() instead
$(function(){
$('ul[data-geral1]').append(function(){
return $('li[data-nivelpai="'+$(this).data('geral1')+'"]')
})
})
I have an accordion menu in my website top page.
when click primary menus, accordion toggles using jQuery.
But when link to it from primary menus in another page, it doesn't work.
primary-menu
<ul id="menu-aaa" class="primary-menu">
<li id="menu-item-1">
home</li>
<li id="menu-item-2">
aaa</li>
<li id="menu-item-3">
bbb</li>
</ul>
accordion menu
<div id="aaa" class="testmenu">
<label for="testmenu_bar01"></label>
<input type="checkbox" id="testmenu_bar01" class="accordion">
<ul id="links01">
<li class="testmenu01-li-01">link1</li>
<li class="testmenu01-li-02">link2</li>
<li class="testmenu01-li-03">link3</li>
<li class="testmenu01-li-04">link4</li>
</ul>
</div>
<div id="bbb" class="testmenu">
<label for="testmenu_bar02"></label>
<input type="checkbox" id="testmenu_bar02" class="accordion">
<ul id="links02">
<li class="testmenu02-li-01">link1</li>
<li class="testmenu02-li-02">link1</li>
<li class="testmenu02-li-03">link1</li>
<li class="testmenu02-li-04">link1</li>
</ul>
</div>
jQuery
$(function($){
$("ul.primary-menu > li.menu-item-2 > a").click(function() {
$('input#testmenu_bar01').prop('checked',true);
})
$("ul.primary-menu > li.menu-item-3 > a").click(function() {
$('input#testmenu_bar02').prop('checked',true);
$('li.testmenu01-li-02').css('margin-top','2vh');
})
});
I read this
How open my toggle-accordion from another page?
and I tried to add
$(location.hash).find(.accordion).prop('checked', true);
to my cord, but it was wrong.
Then, I tried this (in my wordpress site)
jQuery(function($){
var url = $(window.location.href);
var hash = url.substring(url.indexOf('#'));
$(hash).find('input[type=checkbox]').prop('checked', true);
});
But it was something wrong, it doesn't work.
I solved the problem by use this jQuery code;
$(location.hash).find('input[type=checkbox]').prop('checked', true);
Thank you.
Im having a problem using href/anchor scrolling with angularjs. Once I click the h ref link it always links to the index page sample like this http://xxxxxx/#!/index#sec-menu not sure what I'm doing wrong.
Thanks for the assistance.
HTML
<div class="nav-holder main-menu">
<nav>
<ul>
<li>
Menu
</li>
</ul>
</nav>
</div>
<span class="fw-separator" id="sec-menu"></span>
not sure if this is the cause but I have something like this in my app.js
.otherwise({
redirectTo: '/index'
});
<div class="nav-holder main-menu">
<nav>
<ul>
<li>
<a ng-href="#/?scroll=sec-menu">My element</a>
</li>
</ul>
</nav>
</div>
<span class="fw-separator" id="sec-menu"></span>
change the run code in the module declaration in app.js like so:
app.run(function($location, $rootScope) {
$rootScope.$watch(function() { return $location.search() }, function(search) {
var po= 0;
if (search.hasOwnProperty('scroll')) {
var $target = $('#' + search.scroll);
po= $target.offset().top;
}
$("body,html").animate({scrollTop: po}, "slow");
});
})
I have my navbar of links and when the user is on a page that corresponds to one of the links I want to change the background color of that link. For example, when the user is on the home page I want to change the background color of the home link. I tried with #navbar li a:current but that doesn't work.Is this possible with css?
html:
<div id="navbar">
<ul>
<li>Home</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
<li>Samples</li>
</ul>
</div> <!-- end of navbar div -->
CSS:
#navbar li a.current {
background-color: #FFF;}
Your CSS is wrong. It should be #navbar li a.current {
background-color: #FFF;} You had a colon after a:current.
Your HTML should be like this:
<div id="navbar"><ul>
<li class="current">Home</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
<li>Samples</li>
</ul>
</div> <!-- end of navbar div -->
<div id="navbar">
<ul>
<li class="current">Home</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
<li>Samples</li>
</ul>
</div> <!-- end of navbar div -->
Now create a background color for the class of "current". You'll have to apply that class with the backend logic. CSS cannot workout the logic by itself. It only handles the styles
You could use javascript(jQuery) like this:
var currenturl = window.location.pathname.split( '/' );
$('#navbar>li>a[href="'+currenturl[1]+'"]').css({background: 'some_color'})
If you want to accomplish this only with CSS, maybe you can use the parent's IDs:
<div id="parent1">
<div id="navbar">
<ul>
<li class="home">Home</li>
<li class="service">Services</li>
<li class="about">About</li>
<li class="contact">Contact</li>
<li class="sample">Samples</li>
</ul>
</div>
</div>
<div id="parent2">
<div id="navbar">
<ul>
<li class="home">Home</li>
<li class="service">Services</li>
<li class="about">About</li>
<li class="contact">Contact</li>
<li class="sample">Samples</li>
</ul>
</div>
</div>
And then...
#parent1 li.home {
background: red;
}
#parent2 li.home {
background: black;
}
You could do this using Javascript/JQuery (although a server-side approach is probably better):
var currentPath = window.location.pathname;
var pageName = currentPath.substr(currentPath.lastIndexOf('/')+1); // "index.html", etc
$("a[href=" + pageName + "]").parent().css("background", "#FFF");
The above requires JQuery, but you can do something similar in pure Javascript:
var targets = document.querySelectorAll('a[href=' + pageName + ']');
if (targets.length > 0) {
targets[0].parentNode.style.background = "#FFF";
}
(Fiddle)
Offcourse it is possible with pure css3. You could give an id to all your 'li' s.
like ,
li id="sample"
then modify your anchor to
a href="index.html#sample"
use CSS :target selector
li:target{
// apply your styles here
}
simple