HTML:
<div class="btn-small blue">
<span class="label bottom">Vascular Surgery</span>
</div>
<div class="btn-small red">
<span class="label bottom">Administrator</span>
</div>
<div class="btn-small blue">
<span class="label bottom">Cardiology North</span>
</div>
<div class="calContent">
<div class="divContent">
<div class="divContentHolder">
<div>
VASCULAR CURGERY
</div>
<div>
CALENDAR GOES HERE
</div>
</div>
</div>
<div class="divContent">
This is Second
</div>
<div class="divContent">
This is Third
</div>
</div>
Fiddle: https://jsfiddle.net/geetof8x/
If I remove the following code:
<div class="divContent">
<div class="divContentHolder">
<div>
VASCULAR CURGERY
</div>
<div>
CALENDAR GOES HERE
</div>
</div>
</div>
With:
<div class="divContent">
This is First
</div>
The script works fine but with the added extra div inside the divContent div, the code doesn't work correctly.
The removed code will be used in the final template. How can I edit the javascript so it can handle either case scenario.
You're only interested in the children (not grandchildren, etc.) of .calContent.
One solution is to use the child selector to limit your selection to only the direct children:
$('.calContent > div:eq(' + $(this).index() + ')').fadeOut();
Updated Fiddle
Related
So as the question says, I am trying to hover the class button1 and get the id of 'css'. With my current code, all I get is the id html. I need to get a unique id that's pertinent to which button I hover. I'm still newer to jquery and javascript in general but I can't seem to find any information on this topic so any reference source would be great too if possible.
Here's my code:
HTML
<div class="button1">
<div class="text">
<p>Skill<br /> <span class="Score" id = "html">10/10 </span> </p>
</div>
<div class="button1 Overlay">
</div>
<div class="button1">
<div class="text">
<p>Skill<br /> <span class="Score" id = "css">9/10 </span> </p>
</div>
<div class="button1 Overlay">
</div>
</div>
Jquery
('.button1').mouseover(function(event) {
$(".text").attr('id');
})
With your current code you get nothing, since .text does not have ID and result is never used. Use $(this).find('.Score').attr('id')[1].
Note few bug fixes:
('.button1').mouseover is missing $
You have nested .button1 (first one is not properly closed, use proper indentation for easier debugging), so it's impossible to find singe element, because you hover on top most element
$('.button1').mouseover(function(event) {
console.log($(this).find('.Score').attr('id'))
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="button1">
<div class="text">
<p>Skill<br /> <span class="Score" id="html">10/10 </span> </p>
</div>
<div class="button1 Overlay">
</div>
</div>
<div class="button1">
<div class="text">
<p>Skill<br /> <span class="Score" id="css">9/10 </span> </p>
</div>
<div class="button1 Overlay">
</div>
</div>
For some reason my jQuery function is not working on a dynamic value.
I'm trying to show/hide content ("item-content") when the user clicks on the span "Click here".
If I use not nested HTML, everything works fine, but for some reason, my function breaks when I use nested HTML.
$('.item-content').hide();
$(document).on('click','.main .child span.item-title', function(e){
e.preventDefault();
$(this).next('.main .child span.item-content').toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="main">
<div class="child">
<span class="item-title" style="cursor:pointer">
Click here
</span>
<div class="item-content">
<div class="item-body">
1
</div>
</div>
</div>
<div class="child">>
<span class="item-title" style="cursor:pointer">
Click here
</span>
<div class="item-content">
<div class="item-body">
2
</div>
</div>
</div>
<div class="child">>
<span class="item-title" style="cursor:pointer">
Click here
</span>
<div class="item-content">
<div class="item-body">
3
</div>
</div>
</div>
</div>
.next looks for the next sibling, so in your code you don't need to specify the class of what you're looking for as you're just getting the span sibling, which is .item-content.
Working example:
$('.item-content').hide();
$(document).on('click','.main .child span.item-title', function(e){
e.preventDefault();
$(this).next().toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="main">
<div class="child">
<span class="item-title" style="cursor:pointer">
Click here
</span>
<div class="item-content">
<div class="item-body">
1
</div>
</div>
</div>
<div class="child">>
<span class="item-title" style="cursor:pointer">
Click here
</span>
<div class="item-content">
<div class="item-body">
2
</div>
</div>
</div>
<div class="child">>
<span class="item-title" style="cursor:pointer">
Click here
</span>
<div class="item-content">
<div class="item-body">
3
</div>
</div>
</div>
</div>
The selector you are toggling is incorrect, as it is looking for a span called 'item-content'. It should be:
$(this).next('.main .child div.item-content').toggle();
First of all make sure that the jQuery cdn library is initiated before the custom script on your page.
There are two ways to hide components by css and jquery both. I'm posting the css script too and it's better to hide using css.
Also there is no need for specifying the classes from top inside the click event for toggle, the next() function basically lookup for the next html component.
$('.item-content').hide(); // if using css to hide than this line is not required
$(document).on('click', '.item-title', function(){
$(this).next().toggle();
});
.item-content {
display: none;
}
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<div class="main">
<div class="child">
<span class="item-title" style="cursor:pointer">
Click here
</span>
<div class="item-content">
<div class="item-body">
1
</div>
</div>
</div>
<div class="child">>
<span class="item-title" style="cursor:pointer">
Click here
</span>
<div class="item-content">
<div class="item-body">
2
</div>
</div>
</div>
<div class="child">>
<span class="item-title" style="cursor:pointer">
Click here
</span>
<div class="item-content">
<div class="item-body">
3
</div>
</div>
</div>
</div>
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.
my code is
<div class="col-lg-6 stickyboard" style="padding:5px;">
<div class="sticky-container" >
<div class="sticky" >
<h4>{{title}}</h4>
{{content}}
</div>
// If click on this
<i class="mdi-content-add pull-right" id="addNewSticky"></i>
</div>
</div>
//Here I want to add some html
<div class="col-lg-6 stickyboard" style="padding:5px;">
<div class="sticky-container" >
<div class="sticky" >
<h4>{{title}}</h4>
{{content}}
</div>
<i class="mdi-content-add pull-right" id="addNewSticky"></i>
</div>
</div>
When somebody clicks on addnewsticky I want to add html immediatly after that sticky,
Expected output
<div class="col-lg-6 stickyboard" style="padding:5px;">
<div class="sticky-container" >
<div class="sticky" >
<h4>{{title}}</h4>
{{content}}
</div>
// If click on this
<i class="mdi-content-add pull-right" id="addNewSticky"></i>
</div>
</div>
<h3>Hi this is added html</h3>
<div class="col-lg-6 stickyboard" style="padding:5px;">
<div class="sticky-container" >
<div class="sticky" >
<h4>{{title}}</h4>
{{content}}
</div>
<i class="mdi-content-add pull-right" id="addNewSticky"></i>
</div>
</div>
See newly added html <h3> tag
How to do that using jquery?
addNewSticky:function(e,tmpl){
$(e.currentTarget).parent().parent().find('.stickyboard').html("some html");
}
but this is adding to the same class itself not after that class
You can insert it after the .stickyboard ancestor of the click target.
So
$(e.currentTarget).closest('.stickyboard').after("<h3>Hi this is added html</h3>");
You can use .after() also like:
addNewSticky:function(e,tmpl){
$(e.currentTarget).parent().parent().after("some html");
}
I have the beginnings of what I would like working but am afraid I'm not headed down a DRY path with my line of thinking.
Right now if you click any of the below divs it will hide or show a icon checkmark next to all the headers below.
I want only when a specific div is clicked to display the icon checkmark to the relevant header down the page.
What method should I use in my approach? The way I have it seemingly won't make sense down the road. Thanks for your attention and thanks for taking a look.
<div class="row container">
<div class="row offset1">
<div class="span3 frustrate_topside">
<div>
<p>Click here to only show icon-ok element next to relevant anecdotes!</p>
</div>
</div>
<div class="span3 frustrate_topside">
<div>
<p>Click here to only show icon-ok element next to relevant anecdotes!</p>
</div>
</div>
<div class="span3 frustrate_topside">
<div>
<p>Click here to only show icon-ok element next to relevant anecdotes!</p>
</div>
</div>
</div>
</div>
<div class="offset2 span6" id='container'>
<h5 class="faq_header"><i class="icon-ok"></i> Hey, it would be cool if..</h5>
<div class='content'>trouble</div>
<hr>
<h5 class="faq_header"><i class="icon-ok"></i> The kick is up! And..</h5>
<div class='content'> 80% completion rate.</div>
<hr>
<h5 class="faq_header"><i class="icon-ok"></i> Third anecdote</h5>
<div class='content'>joke on me</div>
</div>
<script>
$('div.frustrate_topside').click(function(){
$('i').toggle();
});
</script>
Here's a working JS fiddle for what you're asking for: http://jsfiddle.net/sTve6/1/
I don't have your file set up with the icons/images, so I used placeholder text of 'o' for each icon, and made the assumption that your icons start out hidden.
HTML:
<div class="row container">
<div class="row offset1">
<div class="span3 frustrate_topside" for='q1'>
<div>
<p>Click here to only show icon-ok element next to relevant anecdotes!</p>
</div>
</div>
<div class="span3 frustrate_topside" for='q2'>
<div>
<p>Click here to only show icon-ok element next to relevant anecdotes!</p>
</div>
</div>
<div class="span3 frustrate_topside" for='q3'>
<div>
<p>Click here to only show icon-ok element next to relevant anecdotes!</p>
</div>
</div>
</div>
</div>
<div class="offset2 span6" id='container'>
<h5 class="faq_header"><i class="icon-ok" id="q1">o</i> Hey, it would be cool if..</h5>
<div class='content'>trouble</div>
<hr>
<h5 class="faq_header"><i class="icon-ok" id="q2">o</i> The kick is up! And..</h5>
<div class='content'> 80% completion rate.</div>
<hr>
<h5 class="faq_header"><i class="icon-ok" id="q3">o</i> Third anecdote</h5>
<div class='content'>joke on me</div>
</div>
CSS:
.icon-ok
{
display:none;
}
JS:
$('div.frustrate_topside').click(function(){
var elt = $(this).attr('for');
$("#" + elt).toggle();
});