We help IT Professionals succeed at work.

JQuery Syntax...

erzoolander
erzoolander asked
on
145 Views
Last Modified: 2017-03-22
I have a number of elements that are set up like:

<div class="day fri past">
<a data-day="10" data-month="3" data-year="2017">10</a>
</div>

What would the syntax be in Jquery to output in a function the day, month and year?

something like:

$('.day a').click(function(){
    alert("day is"+?);
    alert("month is"+?);
    alert("year is"+?);
});

Open in new window


?

Is that the right form, and how do you go about grabbing those data variables?  

Thanks in advance!
Comment
Watch Question

Jim RiddlesPrepress/OMS Specialist
CERTIFIED EXPERT

Commented:
Access the data using the .data syntaxin jQuery.  Note that you will need to include jQuery in your page, if you have not already done so.

$('.day a').click(function() {
  alert("day is " + $(this).data('day'));
  alert("month is " + $(this).data('month'));
  alert("year is " + $(this).data('year'));
});

Open in new window

CERTIFIED EXPERT
Distinguished Expert 2017

Commented:
First solution.You can assigne an id into separate element and work as follow:
HTML
<div class="day fri past">
<a data-day="10" data-month="3" data-year="2017" id="date_1" >10</a>
</div>
  <div class="day fri past">
<a data-day="20" data-month="31" data-year="2017" id="date_2" >10</a>
</div>
  <div class="day fri past">
<a data-day="12" data-month="3" data-year="2017" id="date_3">10</a>
</div>

Open in new window


JQuery:

(function(){
var day=$('#date_1').data('day');
var month=$('#date_1').data('month');
var year=$('#date_1').data('year');
alert(day+'\n'+month+'\n'+year);
})();

Open in new window


Second without setting ID attr:
HTML
<div class="day fri past">
<a data-day="10" data-month="3" data-year="2017"  >10</a>
</div>
  <div class="day fri past">
<a data-day="20" data-month="31" data-year="2017"  >10</a>
</div>
  <div class="day fri past">
<a data-day="12" data-month="3" data-year="2017" >10</a>
</div>

Open in new window


JQuery:
($(function(){
var allAnchorElements=document.querySelectorAll('a');

for(var i=0;i<=allAnchorElements.length;i++){
  var dayi=allAnchorElements[i].dataset.day;
  var monthi=allAnchorElements[i].dataset.month;
  var yeari=allAnchorElements[i].dataset.year;
  alert(dayi+'\n'+monthi+'\n'+yeari);
}
}));

Open in new window

CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019
Commented:
This problem has been solved!
(Unlock this solution with a 7-day Free Trial)
UNLOCK SOLUTION
Jim RiddlesPrepress/OMS Specialist
CERTIFIED EXPERT

Commented:
Not to be snarky, but can you tell me why my answer was not accepted?  You specifically requested a jQuery solution, which is what I provided, as Julian pointed out.  It will help me to present better answers in the future if I know why.