I have this function that appends a div (Base-Shirt) to a div (Button)
<div class="Button"><div class="Base-Shirt"></div></div>
I then want the images to populate the (Base-Shirt) div. When I run the script the images are placed after the "Base-Shirt" div. Do you know how I would get them into the "Base-Shirt" and not after them?
This is what is happening:
<div class="Button">
<div class="Base-Shirt"></div>
<img class="2016" src="img/swatch/2016.jpg" title="Ruby_Red" alt="Main, Pique">
<img class="2017" src="img/swatch/2017.jpg" title="Khaki_Tan" alt="Main, Pique">
This is what I want to happen:
<div class="Button">
<div class="Base-Shirt">
<img class="2016" src="img/swatch/2016.jpg" title="Ruby_Red" alt="Main, Pique">
<img class="2017" src="img/swatch/2017.jpg" title="Khaki_Tan" alt="Main, Pique">
</div>
Function
function parse(document){
//Product
$(document).find("Item").each(function(){
$(".Button").append('<div class="' + $(this).attr('name') +'"></div>');
});
//Swatch
$(document).find("Swatch").each(function(){
$(".Button:nth-child(1)").append(
'<img class="' + $(this).attr('name') + '" alt="' + $(this).attr('alt') + '" title="' + $(this).attr('title') + '" src="img/swatch/' + $(this).attr('name') + '.jpg">'
);
});
}//function parse End
Thank you.
You could try $(".Button").children(":first") which will land you on the div-shirt element
use children and eq
$(".Button").children(":eq(0)"); //<-- this will get you the first children(start form 0)
$(".Button").children(":eq(1)"); //<-- this will get you the second children
Related
I am trying to access the parent element up to the button element to modify its css. I can access the span element via id. But when I try to go to the parent img it says undefined
Here is my html code
<button type="button" class="buttonLike">\
<img src = "../Image/thumbsUp.png" clas="test">\
<span class="postID" id=' + idPost + '>' + likesPost + '</span>\
</img>\
</button>\
and here is my jquery code that access the span element
$.each(result, function (index,data) {
var liked = data.liked;
if (liked == true) {
console.log($("#" + postId).parent("img").attr("src"));
}
});
How can i do this right.
img element is self-closing. try this:
<button type="button" class="buttonLike">\
<img src = "../Image/thumbsUp.png" clas="test">
<span class="postID" id=' + idPost + '>' + likesPost + '</span>\
</button>
and get it with jquery:
console.log($("#" + postId).parent().find("img").attr("src"));
I think you should not wrap the span inside the img. that will make more easy for you. But if you still want to. try this.
$("#postId").closest("img");
try using this
.parent().find('img').attr('src')
console.log($("#idPost").parent().find('img').attr('src'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="buttonLike">
<img src = "Image/thumbsUp.png" class="test">
<span class="postID" id='idPost'>likesPost </span>
</button>
I have closed the image and made the span as sibling of parent;
In this code snippet I have provided both jquery approach and pure js approach. Hope this helps.
//jquery approach
console.log($(".postID").siblings('.test').attr("src"));
//pure js
console.log(document.getElementsByClassName("postID")[0].previousElementSibling.getAttribute('src'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="buttonLike">
<img class="test" src="http://cdn3-www.dogtime.com/assets/uploads/gallery/goldador-dog-breed-pictures/puppy-1.jpg"/>
<span class="postID" id=' + idPost + '>' + likesPost + '</span>
</button>
I'm trying to create a snippet of HTML, and iterate through each image within that snippet and apply a listener function and modify the image. However, using JQuery's .each() function is not allowing me to use functions such as .prop() to get/set image attributes. How can I apply functions such as .prop() to elements iterated over by the .each() function.
//formatImg simply returns a URL to the resource
var images = '<div class="flex-row">\
<div class="img">\
<img class="img-cover" data-src="' + formatImg(gallery.posts[0].image, 'medium') + '">\
</div>\
<div class="img">\
<img class="img-cover" data-src="' + formatImg(gallery.posts[1].image, 'medium') + '">\
</div>\
</div>';
var location = gallery.posts[0].location.address || 'No Location';
var elem = $('<div class="col-xs-6 col-md-3 tile story">\
<div class="tile-body">\
<div class="frame"></div>\
<div class="hover">\
<p class="md-type-body1">' + (gallery.caption || '') + '</p>\
<ul class="md-type-body2">\
<li>' + gallery.posts.length + (gallery.posts.length == 1 ? ' photo' : ' photos') +'</li>\
</ul>\
</div>\
' + images + '\
</div>\
<div class="tile-foot">\
<div class="hover">\
See all\
<!--<span class="mdi mdi-library-plus icon pull-right"></span>-->\
<!--<span class="mdi mdi-download icon toggle-edit toggler pull-right"></span>-->\
</div>\
<div>\
<div class="ellipses">\
<span class="md-type-body2">' + location + '</span>\
<span class="md-type-caption">' + getTimeAgo(new Date().getTime(), gallery.time_created) +'</span>\
</div>\
</div>\
</div>\
</div>'
);
elem.find('img.img-cover').each(function(){
_this = $(this);
console.log(_this.prop('data-src'));
attachOnImageLoadError(_this);
_this.prop('src',_this.prop('data-src'));
});
The console.log(_this.prop('data-src')) from within each, it returns undefined for every image.
Your problem has nothing to do with each(). Your problem is that you're trying to use prop() to handle HTML5 data attributes.
"data-src" is not an HTML property, therefore _this.prop('data-src') returns null. You would run into the same problem if you were using prop() to try to write to a data-src attribute.
Instead, to read a data attribute named data-src using jquery, use data(). So use _this.data('src').
See https://api.jquery.com/data/#data-html5 for more help.
I have created a simple script below that may help you to make it work:
var images = '<div class="flex-row">\
<div class="img">\
<img class="img-cover" data-src="img-1" />\
</div>\
<div class="img">\
<img class="img-cover" data-src="img-2">\
</div>\
</div>';
$(images).find('img.img-cover').each(function() {
alert($(this).data('src'))
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I am having an issue changing the ID of HTML attributes using JQuery.
This is what I have been using:
$(document).ready(function () {
$('.hiddenDiv').each(function (i) {
$(this).attr("id", "title" + (i + 1));
});
This the HTML:
<div id="Foo">
<div class="title"></div>
<hr></hr>
<div class="hiddenDiv" style="display:none;"></div>
<hr></hr>
<div class="title"></div>
<hr></hr>
<div class="hiddenDiv" style="display:none;"></div>
</div>
I am producing the HTML using another JQuery script that creates it, iterating through an object creating a title and hiddenDiv divs for each element that exists in the object.
jQuery Script that produces the HTML:
$('#Foo').append('<div class="hiddenDiv" style="display:none;">' + foo[0].Content + '<br>' + 'Address: ' + foo[0].Address + '</div><br><hr>');
Both scripts execute when the document is ready.
Looks like elements are not created on DOM ready. You need to add the ids to them just after appending the content. like this:
$('#Foo').append('<div class="hiddenDiv" style="display:none;">' + foo[0].Content + '<br>' + 'Address: ' + foo[0].Address + '</div><br><hr>');
$('.hiddenDiv').each(function (i) {
$(this).attr("id", "title" + (i + 1));
});
Demo
How I can put this code into one div class .element?
var side_bar_html = "<a href='javascript:google.maps.event.trigger(gmarkers[" + parseInt(gmarkers.length - 1) + "],\"click\");'>" + place.name + "</a><br>" + '<div class="raty" />' + "</br>";
$(side_bar_html).appendTo('#side_bar').filter('.raty').raty({
score : place.rating,
path : 'http://wbotelhos.com/raty/lib/img'
})
this code render HTML:
<a href='javascript:google.maps.event.trigger(gmarkers[0],"click");'>The Fort</a>
<br>
<div class="raty" style="cursor: pointer; width: 100px;"><img src="http://wbotelhos.com/raty/lib/img/star-on.png" alt="1" title="bad"> <img src="http://wbotelhos.com/raty/lib/img/star-on.png" alt="2" title="poor"> <img src="http://wbotelhos.com/raty/lib/img/star-on.png" alt="3" title="regular"> <img src="http://wbotelhos.com/raty/lib/img/star-on.png" alt="4" title="good"> <img src="http://wbotelhos.com/raty/lib/img/star-half.png" alt="5" title="gorgeous"><input type="hidden" name="score" value="4.5"></div>
I want to all this code put into DIV class .elemenat
How to do that?
do i need to write a function for that?
You can use like this to append element in div.
var div="<div class='element'></div>";
$('.element').append(side_bar_html );
I'm trying to select a div where class= pick1-box given only the ID of a parent using Coffeescript.
jQuery(document).ready ->
pick1value = $('#vote_pick1_id').val
$("#" + pick1value + " .pick1-box").css('background-color', 'green')
I can verify that pick1value has received a value from $('#vote_pick1_id').val
...
<li class='nominee clearfix' id='146'>
<div class='candidate'>
<img alt="Enders" height="80" src="/assets/25803sm.jpg" />
Dick Waddington
</div>
<div class='pick-boxes'>
<div class='pick1-box'>
1
</div>
<div class='pick2-box'>
2
</div>
</div>
</li>
...
FWIW: $("#" + pick1value) doesn't seem to work either.
This...
pick1value = $('#vote_pick1_id').val
should be this...
pick1value = $('#vote_pick1_id').val()
because you're not passing arguments.
Right now you're assigning the function itself to the variable instead of calling it.
Pretty sure your .css() call could eliminate the () though...
$("#" + pick1value + " .pick1-box").css 'background-color', 'green'