I’m iterating through the elements and grabbing the src attribute of the child of that element. I have this HTML code:
<noscript data-alt="super awesome">
<img src="http://farm9.staticflickr.com/8235/8585847956_39864361e3.jpg" alt="something" />
</noscript>
<noscript data-alt="super awesome">
<img src="http://farm9.staticflickr.com/8235/8585847956_39864361e3.jpg" alt="something" />
</noscript>
and jQuery:
$('body').children().each(function() {
var noscriptTag = $(this)[0];
var imgAlt = noscriptTag.getAttribute("data-alt");
var img_src = noscriptTag.find('img');
var img_regular = img_src.getAttribute("src");
console.log(img_regular);
});
But I’m getting this error:
Uncaught TypeError: Object #<HTMLElement> has no method 'find'
I also tried various other combinations (like $(this).find('img');) without making it work.
Here’s the demo: http://jsfiddle.net/LjWhw/
How do I target the img tag of that element? Thanks!
UPDATE: You can’t target elements which are inside <noscript> with JavaScript.
You are trying to call find jQuery function on DOM object, Use jQuery object instead of DOM javascript object to call find on it.
Change
var noscriptTag = $(this)[0];
To
var noscriptTag = $(this);
Edit: You will also need to change the code accordingly e.g. img_src.getAttribute("src"); to img_src[0].getAttribute("src"); or img_src.attr("src");
I would suggest you to do it this way:
$('body').children().each(function() {
var noscriptTag = $(this).find('noscript').first();
//---------------^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^-----this way
var imgAlt = noscriptTag.getAttribute("data-alt");
var img_src = noscriptTag.find('img');
var img_regular = img_src.attr("src");
console.log(img_regular);
});
try this
http://jsfiddle.net/UQJsy/1/
$('noscript').each(function () {
var noscriptTag = $(this);
var imgAlt = noscriptTag.attr("data-alt");
var img_src = noscriptTag.children('img');
var img_regular = img_src.attr("src");
alert(imgAlt);
});
Related
I made some elements with a for loop and I wanted to get the value and the source, but it seems I can't.
I made a demo of what I did here.
My function seems to work only on the last element created by the for loop.
$("#emprev").click(function(){
var hisval = $(this).attr("value");
var hissrc = $(this).attr("src");
alert(hisval);
alert(hissrc);
});
id attribute should be unique, so when you use jquery to get elements by their id (using #) you will get only the first element.
You should use the classes instead:
$(".emprev").click(function(){
var hisval = $(this).attr("value");
var hissrc = $(this).attr("src");
alert(hisval);
alert(hissrc);
});
Here is the update to your code:
var emval = [':D',':C','8)',':O',':)','._.',':heart:',':P',';P',';)',':(','.-.','-.-'];
var emsrc = ['http://emojipedia-us.s3.amazonaws.com/cache/18/2f/182fa3786046d170707fa46a257185cb.png','http://emojipedia-us.s3.amazonaws.com/cache/c5/a5/c5a5a52fa1633e19ab2648f23ab1ee37.png','http://emojipedia-us.s3.amazonaws.com/cache/c1/2c/c12c7f3797ed8fcdcbedffb2649abfb1.png','http://emojipedia-us.s3.amazonaws.com/cache/55/af/55af488f029266842c13a54d4c50fc11.png','http://emojipedia-us.s3.amazonaws.com/cache/be/22/be22105632cfc32abf7b24bed3924e12.png','http://emojipedia-us.s3.amazonaws.com/cache/ce/1a/ce1a33d6a4535ce73c8b2b899d51071b.png','http://emojipedia-us.s3.amazonaws.com/cache/3e/f0/3ef0aeaf797844b672df6198c53ba479.png','http://emojipedia-us.s3.amazonaws.com/cache/43/be/43be98eee74f44eddec9c3137b1edf28.png','http://emojipedia-us.s3.amazonaws.com/cache/7e/d5/7ed517c9f335c3171b6f92685514667a.png','http://emojipedia-us.s3.amazonaws.com/cache/58/be/58be1ae13dbf3fb471f7f598a0365734.png','http://emojipedia-us.s3.amazonaws.com/cache/0c/04/0c04f9fd77dc486724c269587028e7d2.png','http://emojipedia-us.s3.amazonaws.com/cache/e6/7c/e67c860bd5cd2b9b443516171ec3c6a3.png','http://emojipedia-us.s3.amazonaws.com/cache/c1/05/c105ab901e2fa6e67b38879bcc0ac0b0.png'];
$(document).ready(function () {
for (var i = 0; i <= 12; i++) {
img = $('<img class="emprev" width="32px" height="32px" style="margin-bottom:3px;margin-left:4px;margin-top:2px">')
img.attr("value", emval[i]);
img.attr("src", emsrc[i]);
$("#emoji-list").prepend(img)
}
$(".emprev").click(function(){
var hisval = $(this).attr("value");
var hissrc = $(this).attr("src");
alert(hisval);
alert(hissrc);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="emoji-list" style="display:block;width:290px;height:200px;background:#ecebeb;border:1px solid black;border-radius:5px;position:absolute;bottom:150px;left:52%;z-index:9999999"></div>
Note that I also made some small changes to your code to make sure everything there works correctly
i am trying to append to a div with an ID that is dynamic
<script>
var GameId = "{{$match['gameId']}}";
var Ts = '{{$match['createDate']}}';
var TsInt = parseInt(Ts);
var timeSinceGame = moment(TsInt).fromNow();
$('#'+GameId).append(timeSinceGame );
</script>
the script is run inside of a php foreach loop.
the div ID is set the same as GameID variable
however nothing is appended to anything when run what's wrong here?
None of your jQuery is wrapped in DOM ready events, so the elements are likely not in the DOM yet when the code runs.
Try adding a DOM ready wrapper:
<script>
$(function(){
var GameId = "{{$match['gameId']}}";
var Ts = '{{$match['createDate']}}';
var TsInt = parseInt(Ts);
var timeSinceGame = moment(TsInt).fromNow();
$('#'+GameId).append(timeSinceGame );
});
</script>
$(function(){ is just a handy shortcut for $(document).ready(function(){
The alternative is to simply inject your code after the elements in the page, so that they do already exist.
Html:
<div class="project-box">
<img src="img/ifix.jpg" class="thumbnail img-responsive">
<div class="hover-box">
<h2>TITLE</h2>
<p>Description of title</p>
</div>
</div>
javascipt:
window.onload = function(){
var project = document.getElementsByClassName('project-box');
img = project.getElementsByTagName('img');
alert(img.clientWidth);
};
I'm trying to get the img width and eventually the img height using pure JavaScript I know this is a lot easier with jQuery but I want to do it using only JavaScript.
EDIT:
I realized I was not specifying the array for the img and project
working js:
window.onload = function(){
var project = document.getElementsByClassName('project-box');
img = project[0].getElementsByTagName('img');
alert(img[0].offsetWidth);
};
Both getElementsByClassName and getElementsByTagName returns an array of objects, so you need to access the actual element by its index then call its methods/properties
window.onload = function () {
var project = document.getElementsByClassName('project-box')[0];
var img = project.getElementsByTagName('img')[0];
alert(img.clientWidth);
};
Demo: Fiddle
I believe project.getElementsByTagName('img'); is returning an array, even if it only has one object.
Try something like
window.onload = function(){
var project = document.getElementsByClassName('project-box');
img = project.getElementsByTagName('img');
alert(img.pop().width); //This should remove the element from the array and then call width
};
Try this one:
alert(img.clientWidth);
The reason this is not working is because .getElementsByClassName() and .getElementsByTagName() both wrap elements inside an [object HTMLContainer], you need to select the first element from each of these objects.
This code should work:
window.onload = function()
{
var project = document.getElementsByClassName('project-box');
img = project[0].getElementsByTagName('img');
console.log(img[0].clientWidth);
};
In the parent window I have:
<input type=text size=100 id="picker1" data-listoption="1" data-type="size">
then within the iframe I have
<script>
$(document).ready(function(){
var parent_input = $("#picker1", window.parent.document);
var searchdata = $(parent_input).data();
var listtype = $(parent_input).data('listoption');
console.log(searchdata);
console.log(listtype);
});
and both outputs in the console are empty. What is missing here?
Jquery does not provide the ability to scope a selector using a window's parent. But you can access jQuery on the parent from the child using parent.
Try:
var parent_input = parent.$("#picker1");
var searchdata = $(parent_input).data();
var listtype = $(parent_input).data('listoption');
console.log(searchdata);
console.log(listtype);
Working Example http://jsfiddle.net/AEj4Z/
im trying to insert a new div into the DOM with an id of "app"
var new_div = document.createElement("div");
var app_div = document.getElementById("app");
document.body.insertBefore(new_div, app_div);
this gives me an error in the console:
Uncaught TypeError: Cannot call method 'insertBefore' of null
but i don't know why?
You need to wrap your code to window.onload handler:
window.onload = function() {
var new_div = document.createElement("div");
var app_div = document.getElementById("app");
document.body.insertBefore(new_div, app_div);
}
Example on jsFiddle.
Except that it would be better wrapped in onload() as suggested by Igor, don't you want to add new_div to the document first?
document.body.insertBefore(new_div, document.body.firstChild);
Try use jquery document.ready event