Изменить положение элемента

Question

Что мне нужно сделать, это перемещать элемент div вокруг текстовой строки в зависимости от нажатой клавиши со стрелкой. На самом деле HTML строка будет выглядеть следующим образом:

mytextpharse<div class="blink"></div>

затем на .keyUp случае я буду забрать информацию, на которой была нажата кнопка (event.which) и при нажатии на клавишу является 37 или 39 (которые являются: left, right стрелки) Я хотел бы переместить div.blink в правильном направлении на основе кнопки event.which. Так что, если я буду нажимать клавишу со стрелкой влево дважды он должен форматировать строку в следующем формате:

mytextphar<div class="blink"></div>se

Может ли это быть сделано в JQuery? Если это так, мне нужны идеи о том, какие функции я должен использовать.

Answer 1

это следует сделать трюк (с помощью функции поиска и SUBSTR): (jsfiddle)

$(document).keyup(function(e) { 
    if(e.which == 37) 
    { 
     var str = $("#content").html(); 
     str = str.substr(0,str.search(/<div/)-1) + '<div class="blink"></div>' + str.substr(str.search(/<div/)-1,1) + str.substr(str.search(/<\/div>/)+6); 
     $("#content").html(str) 
    } 
    if(e.which == 39) 
    { 
     var str = $("#content").html(); 
     str = str.substr(0,str.search(/<div/)) + str.substr(str.search(/<\/div>/)+6,1) + '<div class="blink"></div>' + str.substr(str.search(/<\/div>/)+7); 
     $("#content").html(str) 
    }  
}); 

HTML:

<div id='content'> 
mytext<div class="blink"></div>pharse 
</div> 

Answer 2

Вот ваш ответ

КОД

HTML:

<div id="www">mytextpharse<div class="blink"></div></div> 

Jquery

$(document).ready(function(){ 
    $pos = 3 
    $("body").keydown(function(e) { 
      if(e.keyCode == 37) { 
       if($pos > 1){ pos($pos-1);$pos--} 
       else{pos(3);$pos = 3; } 
      }else if(e.keyCode == 39) { 
      if($pos < 3){ pos($pos+1); $pos++ 
      }else{ 
       pos(1); $pos= 1 
      } 
      } 
    }); 

    function pos($step){ 
     console.log($step) 
     switch($step){ 
      case 1: 
       $('#www').html('<div class="blink"></div>mytextpharse') 
      break; 
      case 2: 
       $('#www').html('mytext<div class="blink"></div>pharse') 
      break; 
      case 3: 
       $('#www').html('mytextpharse<div class="blink"></div>') 
      break; 
     } 
    } 
}) 

Fiddle http://jsfiddle.net/krunalp1993/zEazF/2/

Надеется, что это помогает :)