Oscar Hermida Oscar Hermida - 3 months ago 6
Javascript Question

Attach event handler to every li

I have this code and I want to attach DIFFERENT event handlers to every

<a>
without using id or class.
I tried this but didn't work...



$('#points ul li a').on('click', function(event) {
// I don't know why this selectors doesn't work
if ($(event.target).is(':eq(0)')) {
alert('0') // and do something
}
if ($(event.target).is(':eq(1)')) {
alert('1') // and do something
}
if ($(event.target).is(':eq(2)')) {
alert('2') // and do something
}
})

#points ul {
list-style: none;
font-size: 5em;
padding: 0;
margin: 0;
line-height: .5em;
}
#points ul li {
float: left;
}
#points ul li a {
text-decoration: none;
color: grey;
padding: .1em;
line-height: .1em
}
#points {
position: relative;
margin: 0 auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="points">
<ul>
<li><a href="#">.</a>
</li>
<li><a href="#">.</a>
</li>
<li><a href="#">.</a>
</li>
</ul>
</div>

<script





Thanks in advance.

Answer
  1. As suggested there are many alternate solutions, but the specific error in your code was regarding your usage of :eq(0). Change it to #points>ul>li>a(0) as per the jQuery documentation .

    REPLACE

    if ($(event.target).is(':eq(1)')) {
    

    WITH

    if ($(event.target).is('#points>ul>li>a:eq(0)')) {
    

    Note: I have used #points>ul>li>a so that other <a> tags above and below are not selected. ( in light of your comment regarding the same )

  2. I want to just add that if I was asked to do the same I'd take an approach like:

    var objArr = $('#points>ul>li>a');
    objArr.on('click', function(event) {
      switch($(objArr).index(this)){
        case 0:
          alert('0');
          break;
        case 1:
          alert('1');
          break;
        case 2:
          alert('2');
          break;
      }
    });
    

That said your method works too and the WORKING EXAMPLE with the error I mentioned above adjusted for:

$('#points>ul>li>a').on('click', function(event) {
  // I don't know why this selectors doesn't work
  if ($(event.target).is('#points>ul>li>a:eq(0)')) {
    alert('0') // and do something
  }
  if ($(event.target).is('#points>ul>li>a:eq(1)')) {
    alert('1') // and do something 
  }
  if ($(event.target).is('#points>ul>li>a:eq(2)')) {
    alert('2') // and do something
  }
})
#points>ul {
  list-style: none;
  font-size: 5em;
  padding: 0;
  margin: 0;
  line-height: .5em;
}
#points>ul>li {
  float: left;
}
#points>ul>li>a {
  text-decoration: none;
  color: grey;
  margin: .1em;
}
#points>ul>li>a {
  background-color: yellow;
}
div {
  margin-bottom: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <a href="#">random link</a>
  <a href="#">random link</a>
  <a href="#">random link</a>
</div>
<br />
<div id="points">
  <ul>
    <li><a href="#">.</a>
    </li>
    <li><a href="#">.</a>
    </li>
    <li><a href="#">.</a>
    </li>
  </ul>
</div>
<br />
<br />
<br />
<div>
  <a href="#">random link</a>
  <a href="#">random link</a>
</div>

Comments