Ustaw kursor na końcu contenteditable div

Próbuję ustawić kursor na końcu następnego / prev tagu contenteditable, jeśli bieżący jest pusty, ale kiedy ustawię fokus, dodaje fokus na początku tekstu i nie kończy się Próbowałem prawie wszystkich rozwiązań na SO, ale żaden nie wydawał się Pracuj dla mnie. Oto prosty kod, który próbuję

KOD HTML

<div id = 'main'>
<div id = 'n1' contenteditable=true> Content one</div>
<div id = 'n2' contenteditable=true> Content 2</div>
<div id = 'n3' contenteditable=true> Content 3</div>
<div id = 'n4' contenteditable=true> Content 4</div>

JS CODE

$('#main div').keydown(function(){
if(!$(this).text().trim()){
    $(this).prev().focus();
   //setCursorToEnd(this.prev())
    }
});


function setCursorToEnd(ele)
  {
    var range = document.createRange();
    var sel = window.getSelection();
    range.setStart(ele, 1);
    range.collapse(true);
    sel.removeAllRanges();
    sel.addRange(range);
    ele.focus();
  }

questionAnswers(3)

yourAnswerToTheQuestion