JQuery Syntax...

erzoolander
erzoolander used Ask the Experts™
on
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

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
View Solution Only
Jim RiddlesPrepress/OMS Specialist

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

Leonidas Dosas
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

Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
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

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

Open in new window

Working sample here
Jim RiddlesPrepress/OMS Specialist

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.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial