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

Last Comment

Jim Riddles

8/22/2022 - Mon

Jim Riddles

3/13/2017

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

3/13/2017

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

3/13/2017

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

3/22/2017

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