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>
Related
I am facing an easy problem but unable to find a solution the problem is
i am creating a dynamic div with some elements also with some data
$("#divSearchedIssue").append(`
<div class="statistic d-flex align-items-center bg-white has-shadow">
<div class="icon bg-red">
<i class="fa fa-tasks"></i>
</div>
<div class="text">
***//want to get this below id value//**
Mobile Code :
<small id="mbCode">
${ data[0].MobileCode }
</small>
***/want to find/**
<br>
Failed From:
<small>
${ data[0].FailedStation }
</small>
<br>
Issues :
<small>
${ data[0].Issues }
</small>
</div>
<div class="text"><strong> </strong></div>
<div class="text">
<button type="button" id="btn" class="btn btn-warning pull-right">Start</button>
</div>
<div class="text"><br></div>
</div>`);
Here I have a button .On this button click i want to fetch the value of
small text which id is #mbCode as mentioned above inside the code
I am trying this by using the following button click code
$(document).on('click', '#btn', function () {
var data = $(this).closest('small').find('#mbCode').val();
alert(data);
});
but its not working.I mean I cant fetch the value of #mbCode on this button click .So help needed
Thanks for helping
Based on .closest()
Description: For each element in the set, get the first element that
matches the selector by testing the element itself and traversing up
through its ancestors in the DOM tree.
As <small> is not an ancestors to button in hierarchy(while traversing-up),
So You need to first go the parent of <small> through .closest() and then try to find <small> html using .find() and .html()
$(document).on('click', '#btn', function () {
var data = $(this).closest('.statistic').find('small').html();
alert(data);
});
Working snippet:-
data = [{'MobileCode':20,'FailedStation':'WATERLOO','Issues':'broken'}];
$("#divSearchedIssue").append('<div class="statistic d-flex align-items- center bg-white has-shadow"><div class="icon bg-red"><i class="fa fa-tasks"></i></div><div class="text">Mobile Code :<small id="mbCode">' + data[0].MobileCode + '</small><br>Failed From: <small> ' + data[0].FailedStation + '</small><br>Issues :<small> '+ data[0].Issues + '</small></div><div class="text"><strong> </strong></div><div class="text"><button type="button" id="btn" class="btn btn-warning pull-right">Start</button></div><div class="text"><br></div></div>');
$(document).on('click', '#btn', function () {
var data = $(this).closest('.statistic').find('small').each(function(){
alert($(this).html());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divSearchedIssue"></div>
Note:- .text() will work too
https://jsfiddle.net/tyz4ox50/
As identifiers must be unique, Directly use ID Selector with .text()/.html() method
var data = $('#mbCode').text()
However if you are appending multiple elements I would recommend an alternative to persist Mobile code arbitrary data using custom data-* attribute along with <button> which can be fetched using .data(key) and attach event handler using Class Selector
$("#divSearchedIssue").append('<button type="button" id="btn" class="btn btn-warning pull-right" data-mobilecode="' + data[0].MobileCode + '" >Start</button>');
var counter = 0;
function append() {
$("#divSearchedIssue").append('<button type="button" id="btn" class="btn btn-warning pull-right" data-mobilecode="' + ++counter + '" >Start</button>');
}
append();
append();
append();
$(document).on('click', '.btn', function() {
var data = $(this).data('mobilecode');
console.log(data);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divSearchedIssue"></div>
Try the following code snippet
var value = $('#mbCode').val();
Make sure the id is unique
Ids shouldn't be duplicate in an web-page.
Also, small is not one of the parent nodes of btns, and use html instead of val.
You need to go two-level higher to statistic Make it
$(document).on('click', '.text #btn', function () {
var data = $(this).closest('.statistic').find('#mbCode');
console.log(data.html());
});
Demo
var counter = 0;
function append() {
$("#divSearchedIssue").append(
`<div class="statistic d-flex align-items-
center bg-white has-shadow">
<div class="icon bg-red"><i class="fa fa-tasks">
</i></div>
<div class="text">
Mobile Code :<small id="mbCode">` +
(counter++) +
`</small><br>Failed From: <small> ' +
data[0].FailedStation + '</small><br>Issues :<small> ' + data[0].Issues +
'</small></div>
<div class="text"><strong> </strong>
</div>
<div class="text"><button type="button" id="btn" class="btn btn-
warning pull-right">Start</button></div>
<div class="text"><br></div>
</div>`
);
}
append();
append();
append();
$(document).on('click', '.text #btn', function () {
var data = $(this).closest('.statistic').find('#mbCode');
console.log(data.html());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divSearchedIssue"></div>
If your element already has an ID attribute you should be able to find the element by the ID. $("#mbCode")
Your js code
$(this).closest('small').find('#mbCode').val(); // "$(this)", in your code, represents the "button" that was clicked.
is looking for "small" tag inside "button" element, but it's not there. It would work if your button was like
<button type="button" id="btn" class="btn btn-warning pull-right"><small id="mbCode"></small></button>
This should work:
$(document).on('click', '#btn', function () {
var $mbCode = $('#mbCode');
console.log($mbCode);
});
I have tooltip for each table row to show edit options. I make it visible using this code:
function popupFunction(p) {
var popup = document.getElementById("sp" + p);
popup.classList.toggle("show");
}
It's working well. But now the problem is how to hide it if I click any other places?
Here is my html:
<div class='popup' id='eds'>
<i class='fa fa-ellipsis-v' id =" + values.items[i].id + " onclick='popupFunction(this.id)'></i>
<span class='popuptext' id =sp" + values.items[i].id + ">
<div onclick='edit(this.id)' id =ed" + values.items[i].id + ">Edit</div>
<br/>
<div onclick='deleteFunction(this.id)' id =de" + values.items[i].id + ">Delete</div>
</span>
</div>
if show class makes an element to be rendred as tooltip, then removing it, should hide it.
document.getElementById(some_id).classList.remove("show")
should do the trick, i believe.
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
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