Avatar of erzoolander
erzoolander
 asked on

JQuery Syntax...

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!
jQueryJavaScript

Avatar of undefined
Last Comment
Jim Riddles

8/22/2022 - Mon
Jim Riddles

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

Leonidas Dosas

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

ASKER CERTIFIED SOLUTION
Julian Hansen

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
Jim Riddles

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.
Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes