How can I get focused element (<em>)?

Question

I have such a structure:

<div contenteditable="true">
   <em class="class1">__<em>
   <em class="class2">:<em>
   <em class="class1">__<em>
   <em class="class2">:<em>
   <em class="class1">__<em>
</div>

How i can get DOM or JQuery object of focused <em> ?
document.activeElement return general <div>
window.getSelection().focusNode return text of focused <em>

Answer 1

The em tag should really only be used to style the text of an element, and that can be done using CSS with better effectiveness. That being said, you can hunt down the focused element using something like this:

window.getSelection().focusNode.parentElement; 

That will return the actual em element you are looking for. You can probably get a better hold on that using a jQuery selector:

$(window.getSelection().focusNode.parentElement);

Here is a Fiddle

Answer 2

Find a query to match all the elements for what you are interesed to know if them are focussed or not, for example

$("[contenteditable=true] em")

Then, suscribe to focus event

var lastFocused;
$("[contenteditable=true] em").focus(function(e) {
  lastFocused = e.target;
});

You will have the focused element on lastFocused var, make sure to restrict what type of element you want on selector if possible