I'm trying to get all elements in an iframe that have been mouse selected. At the moment, I'm doing it like this, I get the paragraph and all children inside it.

 I'm getting all paragraphs and its children, and then adding them the class .selected in case of mouseup or mousedown. 

2. $("p", $("#"+frame.id).contents()).each(function(){
3. $(this).mouseup(function(){
4. $(this).find('*').addClass("selected");})
5.                                          .mousedown(function(){
6.        $(this).find('*').addClass("selected");
7.  });   
8. });

This way, if I mouseup or down an element, the above functions are called. However, with this only the first and last paragraphs are selected, disregarding the inbetween ones. 

1. <p><span>...</span> <span>..</span>  <span>..</span> </p> this on mouseup
2. <p> <span></span> </p>
3. <p>...</p>
4. <p>...</p>this on mousedown

after this, I get all the selected class elements and set their background-color to yellow:

2. $(".selected", $("iframe").contents()).each(function(){
3.     $(this).html("<span style='background-color:yellow'>"+$(this).html()+'</span>');
4.     $(this).removeClass('selected');    
5. });

My question is if there is a way that allows me to know which elements are being selected (highlighted by the mouse selection), and where in the selected element, the selection starts and ends.

Thanks,

Regards