Difficulty hiding image with no src - javascript

I have a series of the following elements:
<div class="slidetpl">
<img src >
</div>
I want to hide .slidetpl if the image has no source. To do that I have tried the following:
$('.slidetpl img').each(function () {
if (this.src.length == 0) {
$(this).parent().hide();
}
});
But this is not working.
Can anyone point me in the right direction or tell me what I've done wrong?

This does the effect for me:
// Start an immediate invocable function expression, to auto
// execute the internal code and isolate the code from the
// outside JS scope.
(function( $, window, undefined ){
// Find all the document images and iterate over them. In case you like to
// to iterate only under slidetpl change the selector from
// img to .slidetpl img
$( 'img' ).each(
function() {
// If the empty string is equal with the src attribute of
// of the current item in the iteration
if ( '' === $(this).attr('src') ) {
// Then hide the current item in the iteration.
$(this).hide();
}
}
);
})( jQuery, this )
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="" />
<img src />
<img src="http://www.iconsdb.com/icons/preview/icon-sets/web-2-orange-2/running-man-xxl.png" />
Note, the above code will hide all the images with empty src attribute. In case you like to hide only the children elements of the .slidetpl then you can modify the selector from img to .slidetpl img.

Try this:
$(document).ready(function(){
$('.slidetpl img[src=""]').parent().hide();
$('.slidetpl img:not([src=""])').parent().show(); //Can be removed.
});

You are very close, just missing the correct syntax of this, refer below:
if ($(this).attr('src').length == 0)
Watch out the demo here.

$('.slidetpl img[src=""]').hide();

Related

Hide img if it equals a certain height

I'm building a small portfolio with tumblr as my CMS and I need to have thumbnails on the index page. Without hardcoding this, the best way to make this happen seems to be to embed the thumbnail in the body post so the image is pulled through then hiding it on the post page by altering the css to `display:none' by matching it's unique height compared to other images.
It seems great in theory but currently isn't working. What have I missed? The parent div class is .text
<script type="text/javascript">
$(document).ready(function() {
var hide = $('.text img').data-orig-height();
if (hide === 167) {
$('.text img').css('display', 'none');
} else {
$('.text img').css('display', 'block');
}
});
</script>
Image html
<figure class="tmblr-full" data-orig-height="167" data-orig-width="310">
<img src="http://40.media.tumblr.com/d190030c491be51fd47dd1f4291ae9c3/tumblr_inline_nxblnf7rF61tfshob_400.jpg" data-orig-height="167" data-orig-width="310" width="310" height="167" data-meow="true">
</figure>
Use attribute-value selector
$('.text img[data-orig-height="167"]').hide();
This will select all the images inside the .text element having data-orig-height attribute value as 167.
$('.text img[data-orig-height!="167"]').show(); // Show the images whose attribute value is not 167
In the OP code,
$('.text img').data-orig-height();
is not valid function. This'll throw data-orig-height is not a function error.
To get data-* attribute value, use data().
Three problems here:
1 - jQuery does not have a data-orig-height function. You can use the data function.
2 - === comparison will not result in type coercion, so "167" !== 167.
3 - Calling data will only return the first element's data. You want to handle each element individually, which warrants a for-loop.
Try the following:
$('.text img').each(function (k, img) {
var $img = $(img);
if($img.data('origHeight') == 167) {
$img.hide();
} else {
$img.show();
}
});
This :
$('.text img').data-orig-height();
Should be :
$('.text img').data('origHeight');

javascript - how to get img tags from any element?

I want to get img tags attribute values from any element, img tags could be more than 1, and also can be randomized.
like,
<div> hellow <img src='icons/smile.png' title=':)'> how are u <img src='icons/smile2.png' title=':D'></div>
I want to grab their title attribute values and then want to store in some var currentHTML; with all existing div data.
and then insert into any element just like $('#div').html(currentHTML);
and output should be like this,
hellow :) how are u :D
How can I do this?
Thanks in advance.
Try this:
$("img").each(function()
{
$(this).replaceWith($(this).prop("title"));
});
Fiddle. Its just looping through each image and replacing it (with replaceWith()) with its own title attribute.
UPDATE:
Things got more complex. Check this snippet:
// The text result you want
var currentHTML = "";
// Instead of search for each image, we can search of elements that
// contains images and you want to get their text
$(".images").each(function()
{
// Check note #1
var cloned = $(this).clone().css("display", "none").appendTo($("body"));
// Here we select all images from the cloned element to what
// we did before: replace them with their own titles
cloned.find("img").each(function()
{
$(this).replaceWith($(this).prop("title"));
});
// Add the result to the global result text
currentHTML+= cloned.html();
});
// After all, just set the result to the desired element's html
$("#div").html(currentHTML);
Note #1: Here is what is happening in that line:
var cloned = here we create a var which will receive a cloned element;
the cloned element will the current element $(this).clone();
this element must be hidden .css("display", "none");
and then appended to the document's body .appendTo($("body"));.
Note that in your initial html, the div containing the images received the class images:
<div class="images"> hellow <img src='icons/smile.png' title=':)' /> how are u <img src='icons/smile2.png' title=':D' /></div>
So you can do that on more than one element. I hope this helps.
Here's a neat little function you can reuse.
$(function(){
function getImageReplace($el) {
var $copy = $el.clone();
$copy.find('img').each(function(){
$(this).replaceWith($(this).attr('title'));
});
return $copy.text();
}
//now you can use this on any div element you like
$('#go').click(function() {
alert(getImageReplace($('div')));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div> hellow <img src='icons/smile.png' title=':)'> how are u <img src='icons/smile2.png' title=':D'></div>
<button id='go'>Convert images</button>

jQuery select the function selector

I'm trying to achieve something inside a function, to actually access the parent selector.
Here is a small snippet of my HTML code:
<div class="module-row module-tab pull-right" id="modtab-sql_net">
<img src="images/icons/icon-orangebox-plus.png" class="modtab-toggle">
</div>
<div id="tab-module-row-1">
</div>
<div class="module-row module-tab pull-right" id="modtab-sql_dss">
<img src="images/icons/icon-orangebox-plus.png" class="modtab-toggle">
</div>
<div id="tab-module-row-2">
</div>
Here is the jQuery script I tried:
$('div[id^="modtab-"]').click(function(){
$(this).next('div[id^="tab-module-row"]').toggle(function(){
$(this).next('.modtab-toggle').toggle_switch.attr("src").replace("plus", "minus");
// The above line is incorrect. I need to change img attr for the class which is inside the div being clicked
});
});
Now, I want to actually change the image icon from a "plus" to a "minus" (the filenames are kept such).
I need to change $(this).next('.modtab-toggle') in the code to something that can work.
Please do NOT suggest to simply access the class using $('.modtab-toggle') as I have multiple such div tags in the code. It won't work out that way.
Thanks for any help.
Try this:
$('div[id^="modtab-"]').click(function(){
$(this).find('.modtab-toggle').attr("src", function(i, attr){
var o = this.src.indexOf('plus') > -1 ? this.src.replace('plus', 'minus') : this.src.replace('minus', 'plus');
return o;
});
});
See the Demo # Fiddle
try something like this
$('div[id^="modtab-"]').click(function(){
var $this = $(this);// clicked div
$this.next('.tab-module-row').toggle(function(){
$this.find('.modtab-toggle').toggle_switch.attr("src").replace("plus", "minus");
});
});
Note: you should use class instead of id because it should be unique
#tab-module-row ->.tab-module-row
EDITED ANSWER
$('div[id^="modtab-"]').click(function(){
var $this = $(this);// clicked div
$this.next('div[id^="tab-module-row"]').toggle(function(){
var img = $this.find('.modtab-toggle'); // your image object
// your condition to check which image to display will goes here.
});
});
change $(this).next('.modtab-toggle') to $(this).find('.modtab-toggle') to make it work.
See find() docs here

Getting parent starting from src attributte

i need to know if there's a way of getting parent starting with src attributte of img tag . I have something like : 6 draggable objects and 6 dropspots. At every drop i store in a variable src attribute of image i change. With this src i need to find its parrent and set .css("visibility", "visible"). My question : Is there a way to get parent of an img tag starting with its src attribute?
JS FIDDLE: http://jsfiddle.net/FncKS/
Code:
drop: function( event, ui )
{
var dropTarget = event.target.id;
var getSrcChanged = $("#" + dropTarget).children('img').attr("src");
console.log(getSrcChanged);
}
Where console return : ../images/map6.svg (for example)
With this src attributte i would like to make one of draggable objects (the one with same src attributte) visible useing:
var visible = $(dragObjects).children("img").src(getSrcChanged);
$(visible).css("visibility", "visible");
But unfortunately it doesnt work :(
dragObjects its an array : 6 x div.children("img").
Some HTML:
<div class="random drag" id="draggable0">
<img class="svgSize" src="images/map1.svg" draggable="false" />
</div>
<div class="random drag" id="draggable1">
<img class="svgSize" src="images/map2.svg" draggable="false" />
</div>
...
<div class="random drag" id="draggable5">
<img class="svgSize" src="images/map6.svg" draggable="false" />
</div>
I find your scenario very confusing, but it sounds like this is what you want to do:
drop: function( event, ui ) {
var dropTarget = event.target.id,
getSrcChanged = $("#" + dropTarget).children('img').attr("src"),
matchingDraggable = $(dragObjects).find("img[src='"+ getSrcChanged +"'");
matchingDraggable.css("visibility", "visible");
console.log(getSrcChanged);
}
Could you give that a try?

Change part of a string with jQuery

I'm sure this is something simple, but I can't figure it out.
I have this HTML:
<img src="/7290/9200572193_f95fb66c50_m.jpg" />
Which I need to change to
<img src="/7290/9200572193_f95fb66c50_b.jpg" />
This isn't always the same image, but the _m.jpg and _b.jpg are. How can I do this with jQuery?
You can do:
var imgSrc = "/7290/9200572193_f95fb66c50_m.jpg";
imgSrc = imgSrc.replace("_m.jpg", "_b.jpg");
Something like this may help you:
$( "img" ).each(function() {
var src = $( this ).attr( "src" );
$( this ).attr( "src", src.replace( /_m\.(.*)$/, "_b.$1" ) );
});
This will not depend on the extension of your src attribute.
Loop through "img" tags with $("img").each(function(){ doStuff(); });. Change attributes with attr("attribute","new_value"), get attributes with attr("attribute"). Replace with replace("from","to").
$("img").each(function(){
$(this).attr("src",$(this).attr("src").replace("_m","_b"));
});
In short, use.replace. Such as:
"/7290/9200572193_f95fb66c50_m.jpg".replace('_m.jpg', '_b.jpg');
/* OR */
var url = "/7290/9200572193_f95fb66c50_m.jpg";
url.replace('_m.jpg', '_b.jpg');
You use .each() in jQuery to loop through a group of elements. Thus you can use a simple selector like $('img') to select all images on the view and then make changes in the callback method. You would then use .prop to both set and get the current src and change it using old fashioned .replace
$("img").each(function(i) {
$(this).prop("src", $(this).prop("src").replace('_m.jpg', '_b.jpg'));
});
Example

Categories