How to compare all the IDs of
with an array of javascript or jquery?

Question

I have an array like the following:

aVN = new Array();
aVN.push(new Array('CET', 'July', 'Birthday',    '20110704'));
aVN.push(new Array('CGT', 'July', 'Anniversary', '20110705'));

I also have multiple <li> elements in my html like this:

<li id="thismonth">
   <ul>
      <li id="20110701">1</li>
      <li id="20110702">2</li>
      <li id="20110703">3</li>
      <li id="20110704" onclick="displayevent();" class="holiday">4</li>
      <li id="20110705">5</li>
   </ul>

I want to check whether 20110704 from the array aVN is present in the IDs of the <li>s.

If the ID and the array value match, then I want to display "Birthday" (the text from the array) when I click on that particular <li>.

[Don't create arrays like that.](http://www.hunlock.com/blogs/Mastering_Javascript_Arrays#quickIDX1) — Lightness Races in Orbit, Jul 20 '11 at 14:01
Element IDs can't start with a number. They must begin with a letter. — damon, Jul 20 '11 at 14:08
@Matt: That's great; doesn't mean we should start piling out code with strictly numeric IDs, though. Not just yet anyway. — Lightness Races in Orbit, Jul 20 '11 at 14:23
@Matt, interesting.. hadn't notice that.. thanks for the heads up.. — Gabriele Petrioli, Jul 20 '11 at 14:25
@Matt: I didn't know that, thanks! Apparently, you can even use unicode! — damon, Jul 20 '11 at 15:21
@damon what makes you think you're _not_ using unicode with alphanumeric characters? — Matt Ball, Jul 20 '11 at 15:24

Lightness Races in Orbit · Answer 1 · 2011-07-20T14:22:51.463

1

<script type="text/javascript">

var aVN = [
    ['CET', 'July', 'Birthday',    '20110704'],
    ['CGT', 'July', 'Anniversary', '20110705']
];

function displayEvent(text) { // I'm not sure what you wanted to do here
    console.log(text);
}

$(function() {
   $('li.menu').click(function() {
      for (var i = 0; i < aVN.length; i++) {
          if (this.id == 'menu_' + aVN[i][3]) {
             displayEvent(aVN[i][2]);
          }
      }
   }).css({cursor: 'pointer'});
});
</script>

<ul>
   <li class="menu" id="menu_20110701">1</li>
   <li class="menu" id="menu_20110702">2</li>
   <li class="menu" id="menu_20110703">3</li>
   <li class="menu" id="menu_20110704">4</li>
   <li class="menu" id="menu_20110705">5</li>
</ul>

Live demo.

^{(Thanks to Damon for pointing out that IDs may not start with a numeric character.)}

edited Jul 20 '11 at 14:22

answered Jul 20 '11 at 14:10

Lightness Races in Orbit

378,754
76
643
1,055

That's just not true in HTML5. – Matt Ball Jul 20 '11 at 14:14
@Matt: Not everybody is using HTML5. – Lightness Races in Orbit Jul 20 '11 at 14:18
Hmm, there's an issue with the closure here. – Lightness Races in Orbit Jul 20 '11 at 14:18
Fixed it by inverting the lookup. – Lightness Races in Orbit Jul 20 '11 at 14:22
this is what i wanna do...I have made a calendar..each day is made up of
's...like the example above...Now my main aim is to check if the date in the array matches the date id of the
....if it matches (for example if "20110705" from the array matches the
with id "menu_20110705") then the color of that
should change and the other data from the array i.e: birthday should be displayed on mousehover

user550884

Jul 21 '11 at 11:23

@user550884: Yes, I think we all got that. Instead of repeating your question, why not tell us the way in which the presented answers are not what you wanted? – Lightness Races in Orbit Jul 21 '11 at 11:43

@Tomalak : Sorry if i offended you...i didnt mean to repeat the question...Just wanted to phrase it properly.. – user550884 Jul 21 '11 at 14:42

@user550884: Offence is not the same as frustration. :) – Lightness Races in Orbit Jul 21 '11 at 14:44

ShankarSangoli · Answer 2 · 2011-07-20T14:28:08.673

0

Try this

aVN = new Array();
aVN.push(new Array('CET', 'July','Birthday', '20110704'));
aVN.push(new Array('CGT', 'July','Anniversary', '20110705'));

for(var i = 0;i<avN.length;i++){
   if($("#"+avN[i][3]).length){
      $("#"+avN[i][3]).click(function(){
         alert(avN[i][2]);
      }
   }
}

edited Jul 20 '11 at 14:28

answered Jul 20 '11 at 14:05

ShankarSangoli

69,612
13
93
124

You have syntax errors, and you're using a poor method of creating arrays. – Lightness Races in Orbit Jul 20 '11 at 14:09
this is what i wanna do...I have made a calendar..each day is made up of
's...like the example above...Now my main aim is to check if the date in the array matches the date id of the
....if it matches (for example if "20110705" from the array matches the
with id "menu_20110705") then the color of that
should change and the other data from the array i.e: birthday should be displayed on mousehover

user550884

Jul 21 '11 at 10:41

this is what i wanna do...I have made a calendar..each day is made up of

's...like the example above...Now my main aim is to check if the date in the array matches the date id of the

....if it matches (for example if "20110705" from the array matches the

with id "menu_20110705") then the color of that

should change and the other data from the array i.e: birthday should be displayed on mousehover

– user550884 Jul 21 '11 at 11:24

score 0 · Answer 3 · answered Jul 20 '11 at 14:13

0

More "jquerysh" approach would be setting some class with common prefix and unique postfix (.allineed-1, .allineed-2 etc) and then finding content using appropriate css selector - $(document.body).find(".allineed-" + id). Nevertheless, if you insist, you can use ids the same way.

Besides, not sure, but looks like you'd better keep a hash instead of array, since ids are unique (if we do not care about ordering). It would be a bit easier to perform inverse action - to map lis for some data. Keeping in mind that, again, there are some more "jquerysh" approaches - using data to associate dom object with some, well, data )))

answered Jul 20 '11 at 14:13

shabunc

23,119
19
77
102

Why would you ever use `$(document.body).find(".allineed-" + id)` instead of `$(".allineed-" + id)`? – Matt Ball Jul 20 '11 at 14:24
@Matt Ball - just to illustrate that we can pass context. – shabunc Jul 20 '11 at 14:27
this is what i wanna do...I have made a calendar..each day is made up of
's...like the example above...Now my main aim is to check if the date in the array matches the date id of the
....if it matches (for example if "20110705" from the array matches the
with id "menu_20110705") then the color of that
should change and the other data from the array i.e: birthday should be displayed on mousehover

user550884

Jul 21 '11 at 11:24

How to compare all the IDs of with an array of javascript or jquery?

3 Answers3

Live demo.

How to compare all the IDs of
with an array of javascript or jquery?