title: Set cursor to the end of contenteditable div
body: <p>I am trying to set the cursor to the end of next/prev contenteditable tag if the current one is empty, but when I set focus it  adds focus to the begining of the text and not end 
  Tried almost all solution on SO but none seemed to work for me. Here the simple code I am trying </p>
  
  <p><strong>HTML CODE</strong></p>
  
  <pre><code>&lt;div id = 'main'&gt;
  &lt;div id = 'n1' contenteditable=true&gt; Content one&lt;/div&gt;
  &lt;div id = 'n2' contenteditable=true&gt; Content 2&lt;/div&gt;
  &lt;div id = 'n3' contenteditable=true&gt; Content 3&lt;/div&gt;
  &lt;div id = 'n4' contenteditable=true&gt; Content 4&lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>JS CODE</strong></p>
  
  <pre><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();
    }
  </code></pre>