How to insert <img> element into <a> element - javascript

I'm trying to insert an image inside of a hyperlink tag.
Current markup:
<div class="Example">
<a href="http://www.Example.com">
<img src="http://www.Example.com/Sloth.jpg">
</a>
</div>
I want to insert
<img class="example" src="http://www.Example.com/JellyFish.jpg">
So the markup is as follows:
<div class="Example">
<a href="http://www.Example.com">
<img src="http://www.Example.com/Sloth.jpg">
<img class="example" src="http://www.Example.com/JellyFish.jpg">
</a>
</div>
Question
How can I do this via Javascript or JQuery?

To append the image a solution could be:
$('.Example a').append($('<img>', {class: 'example', src: 'http://www.Example.com/JellyFish.jpg'}));
The snippet:
$(function () {
$('.Example a').append($('<img>',
{class: 'example', src: 'http://www.Example.com/JellyFish.jpg'}));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Example">
<a href="http://www.Example.com">
<img src="http://www.Example.com/Sloth.jpg">
</a>
</div>

Using JQuery append()...
$("a").append('<img class="example" src="http://www.Example.com/JellyFish.jpg">');

You could use insertAfter :
$('<img class="example" src="http://www.Example.com/JellyFish.jpg">').insertAfter('.Example img');
Hope this helps.
$('<img class="example" src="http://www.Example.com/JellyFish.jpg">').insertAfter('.Example img');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Example">
<a href="http://www.Example.com">
<img src="http://www.Example.com/Sloth.jpg">
</a>
</div>

Use .append() to insert the element into the <a>. Note that I have used the containing .Example as part of the selector to ensure specificity.
$(document).ready(function(){
$('.Example a').append('<img class="example" src="http://www.Example.com/JellyFish.jpg">')
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Example">
<a href="http://www.Example.com">
<img src="http://www.Example.com/Sloth.jpg">
</a>
</div>

Related

Jquery : find closest h2 tag

i want to find closest h2 tag to hovered image following is my html code
<div class="col-md-3 col-sm-3 col-xs-12" style="padding-left:0;">
<div class="ih-item square effect7"><a href="#">
<div class="img">
<img src="images/facilities/facility1.png" class="img-responsive fullwidthimg">
</div>
<div class="info">
<h3>Content </h3>
<p>Some content </p>
</div></a>
</div>
<h2>Arenas</h2>
</div>
this is what i am trying to do in jquery
$(document).ready(function () {
$('.img').hover( function(){
$(this).closest('h2').hide();
})
})
Please help me how can i do it .
closest() only looks up the ancestor tree. You need a more complex traverse since the <h2> is not an ancestor
Something like:
$('.img').hover( function(){
$(this).closest('.ih-item').siblings('h2').hide();
});
You can use the .parents() method to get the correct ancestor and find for h2 tag:
$(document).ready(function() {
$('.img').hover(function() {
$(this).parents().eq(2).find('h2').hide();
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3 col-sm-3 col-xs-12" style="padding-left:0;">
<div class="ih-item square effect7">
<a href="#">
<div class="img" style="border:2px solid red;">
<img src="images/facilities/facility1.png" class="img-responsive fullwidthimg">
</div>
<div class="info">
<h3>Content </h3>
<p>Some content </p>
</div>
</a>
</div>
<h2>Arenas</h2>
</div>
PLease go through below code, It will help you. Amending #mathiasfc's code so once you hover on image taxt will hide and on hover out you can get it back.
$(document).ready(function() {
$('.img').hover(function() {
$(this).parents().eq(2).find('h2').hide();
},function(){
$(this).parents().eq(2).find('h2').show();
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3 col-sm-3 col-xs-12" style="padding-left:0;">
<div class="ih-item square effect7">
<a href="#">
<div class="img" style="border:2px solid red;">
<img src="images/facilities/facility1.png" class="img-responsive fullwidthimg">
</div>
<div class="info">
<h3>Content </h3>
<p>Some content </p>
</div>
</a>
</div>
<h2>Arenas</h2>
</div>
you were missing quotes on h2 :
$(document).ready(function () {
$('.img').hover( function(){
$(this).closest('.col-md-3').find('h2').hide();
})
})
this should work
You have to think in your tree first, mainly because you are manipulating your DOM tree. My approach in this situation is go to the first-child node and find your h2 tag, after that make your treatment.
$(document).ready(function () {
$('.img').hover( function(){
$(this).parent().parent().parent().find('h2').hide();
})
})
https://jsfiddle.net/9b9s87oo/1/

Toggling a div that is not this parent

I am creating a dropdown menu for my website, and am using jQuery slideToggle. I have it working for each individual category on the navigation (When navparent is clicked, navhild toggles), however when clicking other parents, the previous child div remains open. I would like to close other divs when the parent is clicked.
jQuery(document).ready(function($) {
$('.navparent a').click(function(){
$(this).parent().find('.navchild').slideToggle(90);
<div class="navmobile">
<div class="navparent">
<a href="#">
<img src="/source.png" alt="Parent" title="Parent" />
<br />Parent
</a>
<div class="navchild">
<ul> <li>Child</li></ul>
</div>
</div>
<div class="navparent">
<a href="#">
<img src="/source.png" alt="Parent" title="Parent" />
<br /> Parent
</a>
<div class="navchild">
<ul> <li>Child</li></ul>
</div>
</div>
</div>
You can simply hide all child divs when clicking on parent.
$('.navmobile').find('.navchild').hide()
You can add a line to just hide all .navchild elements, then the one for the click will open.
jQuery(document).ready(function($) {
$('.navchild').hide();
$('.navparent a').click(function(){
$(this).parent().find('.navchild').slideToggle(90);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="navmobile">
<div class="navparent">
<a href="#">
<img src="/dcls_rebuild/themes/custom/dcls/images/mylib_color.png" alt="My Library" title="My Library" />
<br /> MY LIBRARY
</a>
<div class="navchild">
<ul> {{ page.main_navigation }}<li>testestsetsetestsetsetsetsetsetes</li></ul>
</div>
</div>
<div class="navparent">
<a href="#">
<img src="/dcls_rebuild/themes/custom/dcls/images/mylib_color.png" alt="My Library" title="My Library" />
<br /> MY LIBRARY
</a>
<div class="navchild">
<ul> {{ page.main_navigation }}<li>testestsetsetestsetsetsetsetsetes</li></ul>
</div>
</div>
</div>
Or you can just set the .navchild element to be hidden by default in the CSS. (Generally a more efficient way to handle this).
jQuery(document).ready(function($) {
$('.navparent a').click(function(){
$(this).parent().find('.navchild').slideToggle(90);
});
});
.navchild { display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="navmobile">
<div class="navparent">
<a href="#">
<img src="/dcls_rebuild/themes/custom/dcls/images/mylib_color.png" alt="My Library" title="My Library" />
<br /> MY LIBRARY
</a>
<div class="navchild">
<ul> {{ page.main_navigation }}<li>testestsetsetestsetsetsetsetsetes</li></ul>
</div>
</div>
<div class="navparent">
<a href="#">
<img src="/dcls_rebuild/themes/custom/dcls/images/mylib_color.png" alt="My Library" title="My Library" />
<br /> MY LIBRARY
</a>
<div class="navchild">
<ul> {{ page.main_navigation }}<li>testestsetsetestsetsetsetsetsetes</li></ul>
</div>
</div>
</div>
.navchild { display: none; }
when you click on a parentnode, have the jQuery hide all of the children nodes except the one toggled:
jQuery(document).ready(function($) {
$('.navchild').slideToggle(90);
$('.navparent a').click(function(e) {
e.preventDefault();
// determine what div is open
var $this = $(this).parent().find('div');
// hide all divs except this one
$(".navparent div").not($this).hide();
// toggle selected div
$this.slideToggle(90);
});
});
working fiddle: http://jsfiddle.net/iamthejonsmith/BGSyS/900/

Jquery Dynamic property

I have this code:
$('.myClass')[0].src += "somethinghere";
And I also have multiple Div's with myClass.
How can I have the [0] to by relevant to the selected Div?
For example:
$('.myClass')[this].src += "somethinghere";
Here is the js:
$(document).ready(function() {
$(document).on("mouseover",".myClass",function(){
//code here
});
});
The HTML is :
<div>
<a class="myLinkClass" href="" target="_blank">Hover Here</a>
<div class="box">
<iframe class="myIframeClass" width="260" height="150" src="" frameborder="0"></iframe>
</div>
</div>
<div>
<a class="myLinkClass" href="" target="_blank">Hover Here</a>
<div class="box">
<iframe class="myIframeClass" width="260" height="150" src="" frameborder="0"></iframe>
</div>
</div>
<div>
<a class="myLinkClass" href="" target="_blank">Hover Here</a>
<div class="box">
<iframe class="myIframeClass" width="260" height="150" src="" frameborder="0"></iframe>
</div>
</div>
What seems to work everytime is:
$('.myIframeClass')[0].src += "something";
but it will only work for the first iframe and not for the others
You could use the this directly
update: after the updated answer (with the real html) it turns out you need to use the closest method to find the container div and then the .find to locate the actual iframe
$(document).ready(function() {
$(document).on("mouseover", ".myLinkClass", function() {
var iframe = $(this).closest('div').find('iframe').get(0);
iframe.src += 'something%20';
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
<a class="myLinkClass" href="" target="_blank">Hover Here</a>
<div class="box">
<iframe class="myIframeClass" width="260" height="150" src="http://urlecho.appspot.com/echo?body=frame-1" frameborder="0"></iframe>
</div>
</div>
<div>
<a class="myLinkClass" href="" target="_blank">Hover Here</a>
<div class="box">
<iframe class="myIframeClass" width="260" height="150" src="http://urlecho.appspot.com/echo?body=frame-2" frameborder="0"></iframe>
</div>
</div>
<div>
<a class="myLinkClass" href="" target="_blank">Hover Here</a>
<div class="box">
<iframe class="myIframeClass" width="260" height="150" src="http://urlecho.appspot.com/echo?body=frame-3" frameborder="0"></iframe>
</div>
</div>
Keep in mind that div elements do not have a src property.
If they are indeed div elements you might want to use the .attr method instead.
$(document).ready(function() {
$(document).on("mouseover",".myClass",function() {
var element = $(this),
currentSrc = $(this).attr('src');
element.attr('src', currentSrc + 'something');
});
});

jQuery individual lists sliding up and down

I'm not really experienced with jQuery but I couldn't find an answer for this. What I exactly want to do is when people click on the img with the class machine-dropdown that the div overview does slideToggle. I got multiple lists on this page with the same construction so I need them to work individual.
<img class="machine-dropdown" src="/theme/cliptech-xl/img/arrow-machine-drop.png" />
<div class="clear"></div>
<div class="category-divider"></div>
<div class="row">
<div class="overview">
<div class="col-lg-3 col-md-6 col-sm-6">
<a href="machines">
<img class="actueel-img" src="" />
</a>
<a href="">
<span class="machine-overzicht-title"></span>
</a>
</div>
</div>
</div>
I tryed it with many methods that jquery already has. .closest .first .find but still when i click it slides all lists.
Thanks for the help already!
You could do it like this:
Change your HTML to this:
<img class="machine-dropdown" data-target="#overview-1" src="/theme/cliptech-xl/img/arrow-machine-drop.png" />
<div class="clear"></div>
<div class="category-divider"></div>
<div class="row">
<div class="overview" id="overview-1">
<div class="col-lg-3 col-md-6 col-sm-6">
<a href="machines">
<img class="actueel-img" src="" />
</a>
<a href="">
<span class="machine-overzicht-title"></span>
</a>
</div>
</div>
</div>
Note that I've added data-target="#overview-1" to the machine-dropdown image and id="overview-1" to the overview div.
Now use the following javascript/jquery:
$(function(){
$(".machine-dropdown").each(function(){
$(this).click(function(){
var target = $(this).data("target");
$(target).slideToggle();
});
});
});
use this attribute in your code.
$('.machine-dropdown').click(function(){
$(this).next().next().next().find('.overview').slideToggle();
});
I think it will solve your problem.

jQuery closest() or prevAll() not working

When the user hovers over the link with the class "thumb" the closest link with the class "title" should have the class "media-link-hover" applied to it. How can this be done?
I tried closest() and also this but nothing seems to be working:
$('a.thumb').hover(function() {
$(this)
.prevAll('.block')
.find('a.title')
.addClass('media-link-hover');
}, function() {
$(this)
.prevAll('.block')
.find('a.title')
.removeClass('media-link-hover');
});
HTML:
<article class="block">
<div class="inner-left">
<a class="thumb" title="" href="">
<img width="198" height="111" alt="" src="" />
<span class="media-overlay">video</span>
</a>
</div>
<div class="inner-right">
<a class="title" title="" href="">Hello</a>
<div class="description">
<p>Hi there</p>
<a class="teaser" href="">Hola</a>
</div>
<div class="media-stats">
<span class="finder">Found by <strong>Me</strong> 1 month ago</span>
</div>
</div>
</article>
Works with closest('.block')
http://jsfiddle.net/yBwSN/
Try with parents() and also you can reduce the code by using toggleClass().
Demo http://jsfiddle.net/elclanrs/Ce8fu/
$('a.thumb').hover(function() {
$(this)
.parents('.block')
.find('a.title')
.toggleClass('media-link-hover');
});

Categories

Resources