I need to add all of the data attributes in an array
$('.lightbox-trigger').click(function (e) {
e.preventDefault();
e.stopPropagation();
var image_src_arr = $('.lightbox-trigger').data('img-src');
console.log(image_src_arr);
});
http://jsfiddle.net/v7E5g/2/
but I get data attribute only the first element.
What's wrong? How can I make it work ?
You can use .map(), when you use .data() as a getter then it will return the value from the first object in the calling set of objects
$('.lightbox-trigger').click(function (e) {
e.preventDefault();
e.stopPropagation();
var image_src_arr = $('.lightbox-trigger').map(function () {
return $(this).data('img-src');
}).get()
console.log(image_src_arr);
});
Demo: Fiddle
You need to use $(this) to target current clicked div with class lightbox-trigger:
var image_src_arr = $(this).data('img-src');
Updated Fiddle
If you want to retrieve an array of src attribute then you can use .map():
var image_src_arr = $('.lightbox-trigger').map(function () {
return $(this).data('img-src');
}).get();
Updated Fiddle
Related
How can I retrieve this Id using jQuery?
<span data-itemkey="40e1eec6-f949-468e-8a25-ba97d0ec3fb2" class="word">
<div class="additionalStyling green" id="2">Approval Process</div>
</span>
I tried this which returns undefined
$(document).on("click", ".word", function (e) {
var id = $(".word:first-child").attr("id");
}
Change this:
var id = $(".word:first-child").attr("id");
To:
var id = $(this).find("> div").first().attr("id");
Just to make sure, I am not copying the same one:
var id = $(this).children().first().attr('id');
As there will be multiple elements with class .word, $('.word') will return a set of elements.
Use
$(this) // The element that is clicked
.children() // Get all direct descendants
.first() // Get first element from it
.attr('id'); // Get the `id` attribute value
children accepts a selector so you can make the above shorter thus:
$(document).on("click", ".word", function (e) {
var id = $(this).children(':first').attr('id');
}
Try:
$(document).on("click", ".word", function (e) {
var id = $(this).find('[id]').attr('id');
});
How to reset <INPUT> and <TEXTAREA> values with jquery click() if these elements are not part of any <FORM>?
You can reset the values using defaultValue property, both HTMLTextAreaElement and HTMLInputElement support the property, the default value is the value as originally specified in HTML that created these objects.
$('#reset').on('click', function() {
$('input, textarea').val(function() {
return this.defaultValue;
});
});
In case that you only want to reset the values of inputs and textareas that don't belong to a form element you can use .filter() method:
$('#reset').on('click', function() {
$('input, textarea').filter(function() {
return !this.form;
}).val(function() {
return this.defaultValue;
});
});
If the form property is null the input/textarea is not descendant of a form element.
http://jsfiddle.net/E2tbk/
This works:
var elements = $('input,textarea');
$('button').click(function () {
elements.each(function () {
if (!this.form) this.value = this.defaultValue;
});
})
Fiddle
use this:
document.getElementById('yourInputID').value = "";
This solution stores the initial values in the data-oldvalue attribute of the element. When you click the restore button it sets the values back to the initial ones.
Some pointed out you should use .html() to set the value of the textarea. I tried this but it did not set the value while .val() did
$("input").each(function() {
$(this).attr("data-oldvalue", $(this).val());
});
$("textarea").each(function() {
$(this).attr("data-oldvalue", $(this).html());
});
$("button").click(function() {
console.log($(this).attr("data-oldvalue"));
$("input").each(function() {
$(this).val($(this).attr("data-oldvalue"));
});
$("textarea").each(function() {
$(this).val($(this).attr("data-oldvalue"));
});
});
See: http://jsfiddle.net/zvPK7/
Try this:
$('#click').on('click', function() {
$("input[type='text'], textarea").val('');
});
Try This...
$('#btnID').click(function(){
$('#FormID')[0].reset();
});
I want my textArea to resize when the page is fully loaded. I found that
$(document).ready(function() {
// Handler for .ready() called.
});
can help me, so I try to test it and put next code into that function:
$(document).ready(function() {
var element = $('#elementId');
alert(element.value);
});
But when the page is loading, alert shows undefined value of textArea, however there is text inside it.
How can I fetch those value inside ready function?
$(document).ready(function() {
var element = $('#elementId');
alert(element.val());
});
element isn't a DOM element but a jQuery wrapped object, it doesn't have any value property.
Use
$(document).ready(function() {
var element = $('#elementId');
alert(element.val());
});
or
$(document).ready(function() {
var element = document.getElementById('elementId');
alert(element.value);
});
or
$(document).ready(function() {
var element = $('#elementId');
alert(element.get(0).value);
});
You need to use DOM object to use value property and you have jQuery object you need to use val() on it.
$(document).ready(function() {
var element = $('#elementId');
alert(element[0].value);
//or
alert(element.val());
});
I have a button :
<button id="btn1">55</button>
And so I change the button value to test2
$('#btn1').text("22");
I want to show a background-picture if the buttons oldValue greater then the newValue.
How can I get the old value from this button?
"I have over 100 buttons and they are changing dynamically."
Update: Isn't there an event that fires before it changes?
You could use jQuery's .data() call and store it for retrieval as needed.
For instance, say you HTML is:
HTML
<form action="#" method="GET">
<input type="text" value="369" />
<button id="btnID">420</button>
</form>
You could easily first gather the data needed and asign it to each element:
Opening script
$("button") // would simply grab all buttons, you can use whatever css selector
.each(function(i) {
$(this).data("prevVal", parseInt($(this).text()));
});
You can then later check this value against a new value as needed:
... some change function
$('#btn1').text("22");
if ($('#btn1').data("prevVal") > 22) {
// do work
}
$('#btn1').data("prevVal", 22)
Just FYI
If you were using inputs instead it would be easier:
$("input").each(function(i) { $(this).data("prevVal", parseInt($(this).val())) })
.on("change", function(e) {
var newVal = parseInt($(this).val());
if ($(this).data("prevVal") > newVal) {
// do work
};
$(this).data("prevVal" newVal);
});
Or if you wanted to maintain a list of values:
$("input").each(function(i) {
$(this).data("vals", new Array());
$(this).data("vals").push(parseInt($(this).val()));
})
.on("change", function(e) {
$(this).data("vals").push(parseInt($(this).val()));
var vals = $(this).data("vals");
if (vals[vals.length-1] > vals[vals.length-2]) {
// do work
};
});
You need to compare it before changing value.
For example
$('#btn1').text(function (index, old) {
if (parseInt(old) > 22) {
//change background image
}
return "22";
});
FIDDLE
Unless you preserve it before the change you cannot get the old value. The change event is fired after the value has been changed already.
Not sure where you want the old value.. but if it while changing the text then use the function to change the text.
$('#btn1').text(function (index, oldvalue) {
console.log(oldvalue);
return "test2";
});
<button id="btn1">test1</button>
$(document).ready(function(){
var i=1;
$('#btn1').click(function(){
$(this).data('old', $.trim($(this).text())).text('btn'+(++i));
alert( $(this).data('old'));
});
});
for demo
use jQuery.data() to store data associated with the specified element and you will be able to get it just by accessing the same element.
Here's the link to show you how to use jQuery.data();
Here's the code using a more convenient .data() link
Set
$("#btn1").data("oldVal", $("#btn1").html());
Get
$("#btn1").data("oldVal");
Fiddle
I am trying to get the class or an id of the last clicked element. This is what I have based off of what I found here...
HTML
Button
JQUERY
$('.button').click(function () {
myFuntion();
});
function myFunction (e) {
e = e || event;
$.lastClicked = e.target || e.srcElement;
var lastClickedElement = $.lastClicked;
console.log(lastClickedElement);
}
This sort of does what I want, but I am not sure how to go about modifying it so I can get just the class.
I have also tried using this solution but couldn't get it to work with my code.
$('.button').click(function () {
myFuntion();
});
function myFunction(){
var lastID;
lastID = $(this).attr("id");
console.log(lastID);
}
When I do this my console log comes back as undefined. I am probably missing something obvious. Any help is much appreciated. Thanks.
You can pass clicked element as parameter to your function:
$('.button').click(function () {
myFunction(this);
});
function myFunction(element) {
console.log(element);
console.log(element.id);
console.log($(element).attr("class"));
}
UPDATE added jsfiddle
A couple of ways come to mind:
$(".button").click(myFunction);
Should work with the above myFunction.
$(".button").click(function () { myFunction($(this)); });
function myFunction($elem) {
var lastID;
lastID = $elem.attr('id');
$.data('lastID', lastID);
}
In order to get the class-name of the element, assuming you have an accurate reference to the element from which you want to retrieve the data:
var lastClickedElement = $.lastClicked,
lastClickedElementClassNames = lastClickedElement.className;
This does return the full list of all the classes of the element though.
$('.button').click(function () {
myFuntion(this);
});
function myFunction(ele){
var lastID;
lastID = $(ele).attr("id");
console.log(lastID);
}
First Select all possible DOM Elements
var lastSelectedElement = null
$(document).ready(function(){
$("*").live("click",function(){
lastSelectedElement = $(this);
myFunction($(this));
});
});
function myFunction(element) {
console.log(element);
console.log(element.id);
console.log($(element).attr("class"));
}
than you could play with lastSelectedElement by grabbing it's ID or Class with jQuery .attr("ID OR CLASS");