I have the following Jquery code:
$(function () {
$("div[id$='xxx']").click(function ()
{
$('.greenBorder').each(function (i, obj)
{
});
});
});
When a DIV called xxx is clicked, each HTML img with a class of greenBorder is iterated through. I would like to access the src attribute of each img. I can't figure out how to pull this value out. The obj function parameter contains the HTML element object, but how do I get the value out of that object? If this were C/Java/C#, I would cast it.
In the jQuery each function, you can access the current element with this. You can then jQuery select the element using $(this), and read the attribute with $(this).attr("src").
Example:
$(function () {
$("div[id$='xxx']").click(function ()
{
$('.greenBorder').each(function (i, obj)
{
console.log($(this).attr("src"));
});
});
});
Alternatively, you could use obj in place of this. You could also read the src attribute with this.src or obj.src.
Related
Question is very simple but due to some reason i am not able to fix it.
Here is the a href tag that will open modal box.
<center>Apply</center>
Here is jquery to get id from data attribute.
<script type="text/javascript">
$('document').ready(function()
{
$(document).on('click', '#btn-classified', function() {
//$("#btn-classified").on("click", function () {
//$("#btn-classified").click(function() {
var myvar1 = $(this).data('data');
alert(myvar1);
});
});
</script>
For some reason i am not getting any output if i use $(document).on('click', '#btn-classified', function() {
and if i use $("#btn-classified").on("click", function () { then i am getting undefined.
To get 'data' attribute of <a> element use .attr() function of jQuery
$('document').ready(function() {
$(document).on('click', '#btn-classified', function() {
var myvar1 = $(this).attr('data'); // .attr() to get attribute of an element
alert(myvar1);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href='#' id='btn-classified' data='This an element of DOM'>Get this DATA value</a>
Your Code get undefined on event click when your call to an element which exist after of the function.
You need performance the logic of your code, on jQuery you want use
$(document).ready(function(){
//your functions with selectors of DOM
})
or use .on() function of jQuery to events.
$(document).on('click', '.mainButton', function(){
//your code
})
You have two hrefs - one says javscript:void(); the other has a hash (#) Remove one. Then you won't get undefined.
You'll want to change data to data-id in your HTML. That way you can access the data properties in your javascript like so:
$('#btn-classified').on('click', function() {
alert($(this).data('id'));
});
$(this).data('data') would actually expect data-data="<?=$someId?>" in your HTML.
As per the docs https://api.jquery.com/data/ the attribute should be data-data
if it needs to be fetched through .data function.
$('document').ready(function()
{
$(document).on('click', '#btn-classified', function() {
//$("#btn-classified").on("click", function () {
//$("#btn-classified").click(function() {
var myvar1 = $(this).data('data');
alert(myvar1);
});
});
<script data-require="jquery" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<body>
<center>
<a href="#" class="btn-home" data-data="123" data-toggle="modal" data-target="#ApplyModal" name="btn-classified" id="btn-classified" >Apply
</a>
</center>
</body>
Use .attr('data') instead of .data('data') functions because .data function is used to Store arbitrary data associated with the matched elements or return the value at the named data store for the first element in the set of matched elements.
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
I have more similar elements in HTML which are being added continously with PHP. my question is the following:
With jQuery, I would like to add a click event to each of these <div> elements. When any of them is being clicked it should display it's content. The problem is that I guess I need to use classes to specify which elements can be clickable. But in this case the application will not be able to decide which specific element is being clicked, right?
HTML:
<div class="test">1</div>
<div class="test">2</div>
<div class="test">3</div>
<div class="test">4</div>
<div class="test">5</div>
jQuery try:
$("test").on("click", function()
{
var data = ???
alert(data);
});
UPDATE - QUESTION 2:
What happens if I'm placing <a> tags between those divs, and I want to get their href value when the DIV is being clicked?
I always get an error when I try that with this.
this refers to the element triggering the event. Note that it is a regular js element, so you'll need to convert it to a jQuery object before you can use jQuery functions: $(this)
$(".test").on("click", function()
{
var data = $(this).text();
alert(data);
});
Like this:
$(".test").on("click", function(event)
{
var data = $(event.target);
alert(data.text());
});
this variable contains the reference of current item
$(document).ready(function() {
$(".test").click(function(event) {
var data = $(this).text();
alert(data);
});
})
;
The class selector in jquery is $(".ClassName") and to access the value, use $(this) as such:
$(".test").on("click", function(){
var data = $(this).text();
alert(data);
});
You can use this inside the function which mean clicked div
DEMO
$(".test").on("click", function () {
alert($(this).html());
});
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());
});
Hello:) Im a javascript newbie and I'm trying to change a div ID with a script.
I have a div with the id "change", and onClick I would like to change the ID "changed", and that I could do, but I would like to click again, and it will return to receive the ID "change". Can you help me?
This is how I did:
<script>
$document.ready( function() {
$("#change").attr('id','changed');
});
});
Thanx.
You should not change the id -- instead use the class attribute.
This would also work:
$document.ready(function () {
// This assumes the element always starts with the id `change`
// If this is a poor assumption, change it to $('#change, #changed')
$("#change").toggle(function () {
this.id = 'changed';
}, function () {
this.id = 'change';
});
});