for example I have this html code:
<div class="product">
<p>Name1<p>
</div>
<div class="product">
<p>Name2<p>
</div>
<div class="product">
<p>Name3<p>
</div>
<div class="product">
<p>Name4<p>
</div>
<div class="settings">
<p>SETTINGS<p>
</div>
I made settings class to display nothing in css, unless I click on one of 4 p elements in product class. After click the settings class appears at the bottom as it should be.
How should I make that if I click for example Name2 then settings class appears after Name2 and not at the bottom?
Use $(this) to target the element you clicked on, combined with insertAfter() to add the content to this element.
Run the code snippet below and click on any of the elements with the classname product to see how this works.
$(".product").click(function(){
$(".settings").insertAfter($(this));
});
$(".product").click(function(){
$(".settings").insertAfter($(this));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product">
<p>Name1
<p>
</div>
<div class="product">
<p>Name2
<p>
</div>
<div class="product">
<p>Name3
<p>
</div>
<div class="product">
<p>Name4
<p>
</div>
<div class="settings">
<p>SETTINGS
<p>
</div>
You can use .insertAfter() :
$(function(){
$('.product p').click(function(){
$('.settings').insertAfter($(this).closest('.product '))
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product">
<p>Name1<p>
</div>
<div class="product">
<p>Name2<p>
</div>
<div class="product">
<p>Name3<p>
</div>
<div class="product">
<p>Name4<p>
</div>
<div class="settings">
<p>SETTINGS<p>
</div>
You can do it like,
$(".product > p").click(function(){
var $parent = $(this).parent(".product");
$parent.siblings(".settings").insertAfter($parent);
});
by using .insertAfter()
DEMO
Related
I have a category with many products. But only one product has specific class. I need to search this class and hide price only for this product.
This code hide prices of all products:
$(document).ready(function(){
if($('.flag').length > 0)
$('.prices').hide();
});
This is a sample code of website:
<div class="products">
<div class="product">
<div class="flag">
...
</div>
<div class="prices">
...
</div>
<div class="product">
<div class="flag2">
...
</div>
<div class="prices">
...
</div>
<div class="product">
<div class="flag3">
...
</div>
<div class="prices">
...
</div>
<div class="product">
<div class="flag4">
...
</div>
<div class="prices">
...
</div>
</div>
Thanks.
If I'm not mistaken $('.flag .prices').hide() should work without any additional checks. If you would need to do anything else with this container just use
$('.flag').each((_, containerEl) => {
//...your code where containerEl is your container element reference ...
})
But it won't work if you have some kind of lazy loading. It'll be a bit trickier.
I am guessing to a certain extend, but could it be that you want to hide the price for a product that has a flagx class assigned to it? (The following sample uses x=3).
If so, the following might help:
$(document).ready(function(){
$('.flag3').next('div').hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="products">
<div class="product">
<div class="flag">
flag
</div>
<div class="prices">
prices for flag
</div>
<div class="product">
<div class="flag2">
flag2 div
</div>
<div class="prices">
prices for flag2
</div>
<div class="product">
<div class="flag3">
flag3 div
</div><div class="prices">
prices for flag3
</div>
<div class="product">
<div class="flag4">
flag4
</div>
<div class="prices">
prices for flag4
</div>
</div>
I'm looking to get my highlighter (blue bar) to stay on the element that is clicked on. I want to keep the hover animation but also include the option to have it stay on the <div> the user clicks. Any insight is greatly appreciated.
Pen: https://codepen.io/chriskaram/pen/eGXrOp
<div class="demo">
<div class="demo__content">
<h2 class="demo__heading">Assessment</h2>
<div class="demo__elems">
<div class="demo__elem demo__elem-1">Novice Assessment</div>
<div class="demo__elem demo__elem-2">Apprentice Assessment</div>
<div class="demo__elem demo__elem-3">Advanced Assessment</div>
<span class="demo__hover demo__hover-1"></span>
<span class="demo__hover demo__hover-2"></span>
<span class="demo__hover demo__hover-3"></span>
<div class="demo__highlighter">
<div class="demo__elems">
<div class="demo__elem">Novice Assessment</div>
<div class="demo__elem">Apprentice Assessment</div>
<div class="demo__elem">Advanced Assessment</div>
</div>
</div>
<div class="demo__examples">
<div class="demo__examples-nb">
<div class="nb-inner">
<div class="example example-adv">
<div class="example-adv">
<div class="example-adv__top">
<div class="example-adv__top-search"></div>
</div>
<div class="example-adv__mid"></div>
<div class="example-adv__line"></div>
<div class="example-adv__line long"></div>
</div>
</div>
<div class="example example-web">
<div class="example-web__top"></div>
<div class="example-web__left"></div>
<div class="example-web__right">
<div class="example-web__right-line"></div>
<div class="example-web__right-line"></div>
<div class="example-web__right-line"></div>
<div class="example-web__right-line"></div>
<div class="example-web__right-line"></div>
<div class="example-web__right-line"></div>
</div>
</div>
<div class="example example-both">
<div class="example-both__half example-both__left">
<div class="example-both__left-top"></div>
<div class="example-both__left-mid"></div>
</div>
<div class="example-both__half example-both__right">
<div class="example-both__right-top"></div>
<div class="example-both__right-mid"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
In this example, I just focused on demo__element-3.
Check this link: https://codepen.io/anon/pen/GMbYdz
These are the modifications to be made:
CSS:
Add .active to all demo__hover-3:hover styles(in css).
(ie, add .demo__hover-3.active to .demo__hover-3:hover)
Element:
Add class
active to demo__hover elements.
(in this case, it become
<span class="demo__hover demo__hover-3 active"></span>)
Jquery:
Add jquery to add active to element if user clicks it.
Just like the bootstrap manu when you click one option it will add a class 'active' to element <li>
I have many sets of div and I'm trying to copy the content of a specific span into another one and repeat the same operation for all my divs.
Here is my html code:
<div class="item">
<div class="row">
<div class="col-md-12">
<span class="ContentGoesHere"></span>
</div>
</div>
<div class="DivWithContent">
<span class="ContentComesFromHere">This is my content 1</span>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-12">
<span class="ContentGoesHere"></span>
</div>
</div>
<div class="DivWithContent">
<span class="ContentComesFromHere">This is my content 2</span>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-12">
<span class="ContentGoesHere"></span>
</div>
</div>
<div class="DivWithContent">
<span class="ContentComesFromHere">This is my content 3</span>
</div>
</div>
And my jQuery code is:
$("div.item").each(function(i) {
$(this).find('span.ContentComesFromHere').clone(true, true).contents().appendTo('span.ContentGoesHere');
});
It almost works, right now what I get in my span.ContentGoesHere is: This is my content 1This is my content 2This is my content 3 - and it's the same content for all but the content needs to be specific to each div.item.
Thank you for your help.
Try The code below
$("div.item").each(function(i) {
$(this).find('span.ContentComesFromHere')
.clone(true,true).contents()
.appendTo($(this).find('span.ContentGoesHere'));
});
To See The demo in jsFiddle
Click here to see Demo In JsFiddle
Try the code bellow.
$("div.item").each(function(i) {
var content = $(this).find('span.ContentComesFromHere').html();
$(this).find('span.ContentGoesHere').html(content);
});
If you type your function like this:
$("div.item").each(function(i) {
let content = $(this).find('span.ContentComesFromHere');
let contentTarget = $(this).find('span.ContentGoesHere');
content.clone().appendTo(contentTarget);
});
Then the end result will looks like this:
This is my content 1
This is my content 1
This is my content 2
This is my content 2
This is my content 3
This is my content 3
See snippet for the working code.
$("div.item").each(function(i) {
let content = $(this).find('span.ContentComesFromHere');
let contentTarget = $(this).find('span.ContentGoesHere');
content.clone().appendTo(contentTarget);
});
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<div class="item">
<div class="row">
<div class="col-md-12">
<span class="ContentGoesHere"></span>
</div>
</div>
<div class="DivWithContent">
<span class="ContentComesFromHere">This is my content 1</span>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-12">
<span class="ContentGoesHere"></span>
</div>
</div>
<div class="DivWithContent">
<span class="ContentComesFromHere">This is my content 2</span>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-12">
<span class="ContentGoesHere"></span>
</div>
</div>
<div class="DivWithContent">
<span class="ContentComesFromHere">This is my content 3</span>
</div>
</div>
See it working
Your way
$("div.item").each(function(i) {
var targetElement = $(this).find('span.ContentGoesHere');
var sourceHtml = $(this).find('span.ContentComesFromHere').clone().contents()
sourceHtml.appendTo(targetElement);
});
Simpler way
$("div.item").each(function(i) {
var contents = $(this).find('span.ContentComesFromHere').html();
$(this).find('span.ContentGoesHere').html(contents);
});
In your case you need find the source and target both by $(this).find()
Just replace to .appendTo($(this).find('span.ContentGoesHere')); into your JS code and I hope it will be work.
I have a div with the ID wrapper, and I am using .append() to insert some content at the end of that div, like this:
$("#wrapper").append('<div class="content"><div class="subcontent">Some stuff</div></div>');
However, I also want the option to insert a new child before the last content div in the wrapper.
So if the HTML output looks like this:
<div id="wrapper">
<div class="content">
<div class="subcontent">
First
</div>
</div>
<div class="content">
<div class="subcontent">
Second
</div>
</div>
</div>
I want to insert an element before the last one, so I get this:
<div id="wrapper">
<div class="content">
<div class="subcontent">
First
</div>
</div>
<div class="content">
<div class="subcontent">
Third
</div>
</div>
<div class="content">
<div class="subcontent">
Second
</div>
</div>
</div>
How would I do this?
You could use .before() to add a sibling before the element:
$("#wrapper .content:last").before('<div class="content"><div class="subcontent">Third</div></div>');
.insertBefore() does the same thing with a different syntax, namely that you select the element to be added, and pass the element you want to add it before.
$("#wrapper .content:last").before('<div class="content"><div class="subcontent">Third</div></div>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="wrapper">
<div class="content">
<div class="subcontent">
First
</div>
</div>
<div class="content">
<div class="subcontent">
Second
</div>
</div>
</div>
You can use insertBefore():
$('<div class="content"><div class="subcontent">Some stuff</div></div>').insertBefore('#wrapper > div:last');
Or before():
$('#wrapper > div:last').before('<div class="content"><div class="subcontent">Some stuff</div></div>');
This is how I got there:
http://jsfiddle.net/lharby/00tk6avg/
var htmlString = '<div class="subcontent">Some stuff</div>';
$(htmlString).insertBefore('.content div:last');
Select the last element with :last-of-type and use before() to append the new element:
$('.content:last-of-type').before('<div class="new">test</div>');
.new { color:red }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="wrapper">
<div class="content">
<div class="subcontent">
First
</div>
</div>
<div class="content">
<div class="subcontent">
Second
</div>
</div>
</div>
Use insertBefore:
$('<div class="content"><div class="subcontent">Third</div></div>').insertBefore('#wrapper .content:last');
Insert every element in the set of matched elements before the target.
Demo: http://api.jquery.com/insertBefore/
$( "<p>Test</p>" ).insertBefore( "#wrapper > div:last-child" );
You can last() for selecting last item, and before() for appending
$("#wrapper .content").last().before('<div class="content"><div class="subcontent">Some stuff</div></div>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="wrapper">
<div class=" content ">
<div class="subcontent ">
First
</div>
</div>
<div class="content ">
<div class="subcontent ">
Second
</div>
</div>
</div>
you can use nth last child to select the second last div.
fiddle:
http://jsfiddle.net/08ta9wnL/
html:
<div id="wrapper">
<div class="content">
<div class="subcontent">
First
</div>
</div>
<div class="content">
<div class="subcontent">
Second
</div>
</div>
</div>
javascript:
$(document).ready(function(){
$("#wrapper div:nth-last-child(2)").append('<div class="content"><div class="subcontent">Some stuff</div></div>');
});
You can do like this
$("#wrapper .content:last").before("<div class="content"><div class="subcontent">Some stuff</div></div>");
Have a look at fiddle https://jsfiddle.net/48ebssso/
I have a vertical menu.When I click on the first menu i want to show the corresponding div on right side.Two div is possible through it.But cannot do others.How can I do this?
script is
$(function() {
$(".box").hide();
$("#master").click(function(){
$("#leftpanel").show();
$(".box1").show();
});
$("#country").click(function(){
$(".box").hide();
$(".box1").show();
});
$("#currency").click(function(){
$(".box").hide();
$(".box2").show();
});
$("#city").click(function(){
$(".box").hide();
$(".box3").show();
});
$("#EmissionsCountry").click(function(){
$(".box4").show();
$(".box").hide();
});
$("#EmissionsFuel").click(function(){
$(".box5").show();
$(".box").hide();
});
$("#IfcIndustrySector").click(function(){
$(".box6").show();
$(".box").hide();
});
$("#ReTechnologyType").click(function(){
$(".box7").show();
$(".box").hide();
});
$("#Unit").click(function(){
$(".box8").show();
$(".box").hide();
});
$("#Energy").click(function(){
$(".box9").show();
$(".box").hide();
});
});
Html is
<div id="container">
<div id="leftpanel">
<div id="menu1">
<div>
Country
</div>
<div class="imagediv">
<div class="image"><img src="arrow.gif"/></div>
</div>
</div>
<div id="menu1">
<div>
Currency
</div>
<div class="imagediv">
<div class="image"><img src="arrow.gif"/></div>
</div>
</div>
<div id="menu1">
<div>
City
</div>
<div class="imagediv">
<div class="image"><img src="arrow.gif"/></div>
</div>
</div>
<div id="menu1">
<div>
EmissionsCountry
</div>
<div class="imagediv">
<div class="image"><img src="arrow.gif"/></div>
</div>
</div>
<div id="menu1">
<div>
EmissionsFuel
</div>
<div class="imagediv">
<div class="image"><img src="arrow.gif"/></div>
</div>
</div>
<div id="menu1">
<div>
IfcIndustrySector
</div>
<div class="imagediv">
<div class="image"><img src="arrow.gif"/></div>
</div>
</div>
<div id="menu1">
<div>
ReTechnologyType
</div>
<div class="imagediv">
<div class="image"><img src="arrow.gif"/></div>
</div>
</div>
<div id="menu1">
<div>
Unit
</div>
<div class="imagediv">
<div class="image"><img src="arrow.gif"/></div>
</div>
</div>
<div id="menu1">
<div>
Energy
</div>
<div class="imagediv">
<div class="image"><img src="arrow.gif"/></div>
</div>
</div>
</div>
<div id="rightpanel">
<div class="box1 box" id="country">
country
</div>
<div class="box2 box" id="currency">
currency
</div>
<div class="box3 box" id="city">
city
</div>
<div class="box4 box" id="EmissionsCountry">
EmissionsCountry
</div>
<div class="box5 box" id="EmissionsFuel">
EmissionsFuel
</div>
<div class="box6 box" id="IfcIndustrySector">
IfcIndustrySector
</div>
<div class="box7 box" id="ReTechnologyType">
ReTechnologyType
</div>
<div class="box8 box" id="Unit">
Unit
</div>
<div class="box9 box" id="Energy">
Energy
</div>
</div>
</div>
You can see the demo from FIDDLE
I changed your code a little bit and added data-box so you know which .box you show.
FIDDLE
$(function () {
$(".box").hide();
$('.menu1').click(function () {
var boxid = $(this).data('box');
$('.box').hide();
$('.box' + boxid).show();
});
});
I think this will simplify your script a lot and make it more easier to change.
The actuall problem in you HTML is that you don't have IDs assigned to <a>. You only have IDs for the first 2 menu elements and in your script you use
.show(); // this will show the box you need
.hide(); // but then you hide all the boxes
//(even the one you need because it has the class .box)
//Instead use
.hide(); // hide all the boxes
.show(); // show the one you need
FIDDLE with your code <-- added IDs and corrected script show/hide
If youre going to do it this way(by giving divs multiple class names) you should have your .hide functions ALWAYS first in the javascript above, and your .show ALWAYS second. Whats happening is you're showing all elements with a class name of box4, but then hiding all the elements with a class name of box, which includes box4 and the other later divs, so you show it, but then make it hide RIGHT after.
Hope this helps