Question: I have a long list elements `<li>` in my html code:

```
<li class="pl1"><a href="#">some</a></li>
<li class="pl2"><a href="#">something</a></li>
<li class="pl3"><a href="#">something1</a></li>

```

And somewhere else in html code objects:

```
<span id="pl1">.</span>
<span id="pl2">.</span>
<span id="pl3">.</span>

```

And I wrote a script that adds class named `focus` in according pattern:

```
$("li.pl1").mouseenter(function() {
    $("#pl1").addClass("focus");
});
$("li.pl2").mouseenter(function() {
    $("#pl2").addClass("focus");
});
$("li.pl3").mouseenter(function() {
    $("#pl3").addClass("focus");
});

```

The only problem is that the code would have to be long. How to write a short jQuery code according to this pattern?

Answer: 
Apply a single class to all of the items and a data attr to store the corresponding id.

```
<li class="pl" data-itemid="pl1"><a href="#">some</a></li>
<li class="pl" data-itemid="pl2"><a href="#">some thing else</a></li>

```

And apply the event to that class and retrieve the ID from the data:

```
$(".pl").mouseenter(function() {
    $('#' + $(this).data("itemid")).addClass("focus");
});

```

You probably also want a mouseout function. You could use `hover` instead.
Here is a list of steps:

1. Add a common class for the list items, let's say "focusable-item"
2. Add a parent element to act as an event delegation target
3. Add a delegation handler to the parent element. For better re-usability, let's give it the class 'focusable'
4. Rejoice

And the markup:

```
<ul class="focusable>
  <li class="pl1 focusable-item"><a href="#">some</a></li>
  <li class="pl2 focusable-item"><a href="#">something</a></li>
</ul>

// jQuery code
$('.focusable').delegate('.focusable-item', {
  mouseenter: function () {
    $(this).addClass('focus');
  },
  mouseleave: function () {
    $(this).removeClass('focus');
  }
}

```