If div .element has specific class .block / <div class="element block"> then delete html node .element img
HTML:
<div class="element">
<img src="images/picture.jpg" alt="" />
<img src="images/picture.jpg" alt="" />
</div>
Want to delete img, how to do this by Jquery?
Why not something simple like that?
$('.element.block').find('img').remove();
$('.element.block img').remove ()
This removes only images which are in blocks with the both classes
Related
I have the following code
<div id="slider">
<img src="images/p1.jpg" />
<img src="images/p2.jpg" />
<img src="images/p3.jpg" />
</div>
I want to add <a> before and after the image tag with jQuery. This would be the result:
<div id="slider">
<img src="images/p1.jpg" />
<img src="images/p2.jpg" />
<img src="images/p3.jpg" />
</div>
Edit: Details from comments
So far, I have tried like this:
<span class="phone"><img src="malsup.github.io/images/p1.jpg"></span>
<span class="phone"><img src="malsup.github.io/images/p2.jpg"></span>
<span class="phone"><img src="malsup.github.io/images/p3.jpg"></span>
<span class="phone"><img src="malsup.github.io/images/p4.jpg"></span>
i have add like
$('.phone').each(function() {
$(this).wrapInner('<a href="test.php" />');
});
Additional information from comments
I want to use a different url for each image, like:
<div id="slider">
<img src="images/p1.jpg" />
<img src="images/p2.jpg" />
<img src="images/p3.jpg" />
</div>
You can do it using the JQuery wrap() function like so:
var arr = ['https://www.google.com/', 'https://www.yahoo.com/', 'https://www.bing.com/'];
$("#slider img").each(function(index, value){
$(this).wrap("<a href='"+arr[index]+"'></a>");
});
Here is the JSFiddle demo
Use .wrap()
Wrap an HTML structure around each element in the set of matched elements.
Here you can store different url in custom attributes which can later be used to wrap element.
$('#slider img').wrap(function() {
return $('<a />', {
"href": $(this).data('url'),
"class" : "myClass"
});
})
.myClass {
border: 1px solid red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slider">
<img src="images/p1.jpg" data-url='facebook.com' />
<img src="images/p2.jpg" data-url='google.com' />
<img src="images/p3.jpg" data-url='example.com' />
</div>
I'd like to dynamically add Tag in all Images in a specific div with a rel-Attribute.
e.g my Code in HTML
<div id="content">
<img src="images/1.jpg" alt="Pic One" />
<img src="images/2.jpg" alt="Pic Two" />
(...)
</div>
After the JavaScript function, it should be like this:
<div id="content">
<img src="images/1.jpg" alt="Pic One"/>
<img src="images/2.jpg" alt="Pic One"/>
(...)
</div>
Is there a suitable way to do this? Perhaps with regex?
Try this:
$('#content img').each(function(){
$(this).wrap('');
});
Working Demo
JavaScript alone can do this. First, select all the images inside the div:
var images=document.getElementById("content").querySelectorAll("img");
Then, you'll want to loop through each and edit it:
for (var I=0; I<images.length; I++){
images[I].outerHTML="<a href='"+images[I].src+"' rel='prettyPhoto'>"+images[I].outerHTML+"</a>";
}
That should do it.
$("#content > img").each(function(){
$(this).wrap("<a>");
});
I'm trying to display a div by clicking on an image. the div will contains an image or a video.
I will have several images to click on with content attached.
with my actual JS, all div are displayed when cliking on the image.
I use Custom Fields to enter my images and iframe so my code need to be dynamic.
I don't know how to fix it.
Also in my actual code the div disapear when clicking outside of it, I would like to add a text link over to close it when clicking on it.
here is mu JS :
$(document).ready(function(){
$(".mix").click(function(){
$(".photos_overlay").toggle();
});
});
My Html :
<div class="mix photos" data-myorder="20140307">
<img src="http://galaxyfoot.soixanteseize-lab.com/wp-content/uploads/media_11.jpg" class="photo_medias">
</div>
<div class="photos_overlay" data-myorder="20140307">
<img src="http://galaxyfoot.soixanteseize-lab.com/wp-content/uploads/media_11.jpg" class="photo_medias_overlay">
</div>
<br>
<div class="mix videos" data-myorder="20140319">
<img src="http://galaxyfoot.soixanteseize-lab.com/wp-content/uploads/media_21.jpg" class="photo_medias">
</div>
<div class="photos_overlay" data-myorder="20140307">
<iframe width="706" height="364" src="//www.youtube.com/embed/gg1RBO1Cj4Y" frameborder="0" allowfullscreen></iframe>
</div>
and my CSS :
.photo_medias{width:233px;height:133px}
.container .mix.photos{width:233px;height:133px}
.container .mix.videos{width:233px;height:133px}
.photos_overlay{width:967px;height:384px;background-color:black;position:absolute;top:0;left:0;display:none}
.photo_medias_overlay{width:706px;height:364px}
here is JSfidlle to see it in action : http://jsfiddle.net/aaWLJ/12/
can anybody help me with this ?
Thanks a lot for your help,
I have modified your code a little:
HTML
<br />
<div class="mix photos" data-myorder="20140307">
<div class='closeFrame' style="display: none; position:absolute;top:0;">CloseMe</div>
<img src="http://galaxyfoot.soixanteseize-lab.com/wp-content/uploads/media_11.jpg" class="photo_medias">
</div>
<div class="photos_overlay" data-myorder="20140307">
<img src="http://galaxyfoot.soixanteseize-lab.com/wp-content/uploads/media_11.jpg" class="photo_medias_overlay">
</div>
<br>
<div class="mix videos" data-myorder="20140319">
<div class='closeFrame' style="display: none; position:absolute;top:0;">CloseMe</div>
<img src="http://galaxyfoot.soixanteseize-lab.com/wp-content/uploads/media_21.jpg" class="photo_medias">
</div>
<div class="photos_overlay" data-myorder="20140307">
<iframe width="706" height="364" src="//www.youtube.com/embed/gg1RBO1Cj4Y" frameborder="0" allowfullscreen></iframe>
</div>
As you can see I have added a parent div elements for both overlays and a div CloseMe
Also I have changed some CSS (You can change it to what ever you want, I just want to show you the main idea how to resolve your issue):
.photos_overlay{
width:967px;
height:384px;
background-color:black;
position:absolute;
top:20px; /* I have changed top position just to show the div 'CloseMe'*/
left:0;
display:none
}
And the JavaScript Code
$(document).ready(function(){
$(".mix").click(function(){
ShowHide($(this));
});
$(".closeFrame").click(function(){
ShowHide($(this));
});
function ShowHide(elem){
var $mix = $(elem);
$mix.children(".closeFrame").toggle();
$mix.next(".photos_overlay").toggle();
}
});
I need to achieve this effect
but I need to replace images by container (div)
something like:
<div id="myGallery">
<img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" />
<img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" />
<img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" />
<img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" />
</div>
by
<div id="myGallery">
<div id="item1">contenido uno</div>
<div id="item2">contenido dos</div>
<div id="item3">contenido tres</div>
<div id="item4">contenido cuatro</div>
</div>
any ideas or any plugin?
Take a peek at this demo – it looks like it does what you want, and it shouldn't be too hard to modify the ideas from it for your purposes.
I am having difficulty with this simple javascript where I want to nest a div inside another div. The div looks like this.
<div id="div01" class="comdiv ui-widget-content" style="position: absolute; top: 40px; left: 40px; width:350px; height:250px;">
<p id="heading" class="comhdr editableText">Editable</p>
<div class="toolbar">
<a href='#' title='Options' class='icotools'></a>
<a href='#' title='Delete' class='icodelete'></a>
</div>
<br/>
<div class="link_drop_box">
<!-- Nest div here -->
</div>
</div>
In the "link_drop_box" I want to nest this div.
<div id="u0014" class="comurl" onmouseOver="url_preview('show', this, 'div01');" onmouseOut="url_preview('hide', this, 'div01');"><img class="dhandle" src="http://www.google.com/s2/favicons?domain=tf1.fr" align="middle" /> TF1.fr <img class="urlbutton" title="Delete" src="/icodeact/Delete16.png" onClick="delete_url('u0014');"/> <img src="/images/spacer.png" class="spacer" /> <img class="urlbutton" title="Edit" src="/icodeact/Edit16.png" onClick=""/>
</div>
I try to nest this div in the previous with this javascript.
$('#'+card_id).find('.link_box_drop').append('<div id="'+link_id+'" class="link" onmouseOver="link_preview(\'show\', this, \''+card_id+'\');" onmouseOut="link_preview(\'hide\', this, \''+card_id+'\');"><img class="dhandle" src="http://www.google.com/s2/favicons?domain='+link_ico+'" align="middle" /> '+link_info[0]+' <img class="link_button" title="Delete" src="/icodeact/Delete16.png" onClick="delete_url(\''+link_id+'\');"/> <img src="/images/spacer.png" class="link_button_spacer" /> <img class="link_button" title="Edit" src="/icodeact/Edit16.png" onClick=""/> </div>');
I thought that with the .link_drop_box selector I could get the container div with the find function, then append. What is the right way to append an element inside that container?
Your HTML contains:
<div class="link_drop_box">
Your JQuery code:$('#'+card_id).find('.link_box_drop'), which should be:$('#'+card_id).find('.link_drop_box').
$('#div01 div.link_drop_box:first-child').append("<div id=\"u0014\" class=\"comurl\" onmouseOver=\"url_preview(\'show\', this, \'div01\');\" onmouseOut=\"url_preview(\'hide\', this, \'div01\');\"><img class=\"dhandle\" src=\"http://www.google.com/s2/favicons?domain=tf1.fr\" align=\"middle\" /> TF1.fr <img class=\"urlbutton\" title=\"Delete\" src=\"/icodeact/Delete16.png\" onClick=\"delete_url('u0014');\"/> <img src=\"/images/spacer.png\" class=\"spacer\" /> <img class=\"urlbutton\" title=\"Edit\" src=\"/icodeact/Edit16.png\" onClick=\"\"/></div>");
this will do the trick
$('div.link_box_drop', $('#'+card_id))
This selector will return "link_drop_box" in the context of the "card_id" div.
You're using jQuery. Yes, jquery is just a js library, but as you're doing, you'll run into plenty of problems trying to intertwine regular js with jQuery.
With the jQuery functions .find(), .append() etc, you usually, if not always, need the tag name in there before the class or id. Ex. .find('div.link_box_drop'), or
Look over the jQuery documentation for find() and append()
Btw, it's really hard to read that much code on one line. :-/