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!

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

<script> var as = document.querySelectorAll('.day a'); for(var i = 0; i < as.length; i++) { as[i].addEventListener('click', function(e) { e.preventDefault(); alert('day ' + this.dataset.day); alert('month ' + this.dataset.month); alert('year ' + this.dataset.year); }); } </script>

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

LVL 12

Jim RiddlesPrepress/OMS SpecialistCommented: 2017-03-13

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'));
});

LVL 15

Leonidas DosasCommented: 2017-03-13

LVL 69

Julian HansenCommented: 2017-03-13

Using id's is a bit too restrictive - a more generic solution is both possible and desirable.

Jim Riddles has already shown the jQuery way of doing this - you can do the same with JavaScript as follows

Working sample here

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial

Jim RiddlesPrepress/OMS SpecialistCommented: 2017-03-22

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.

JQuery Syntax...

Who is Participating?