Как изменить цвет слова в jquery

Question

Как я могу выбрать слово и изменить цвет этого слова?

например. добавьте прослойку со стилем и измените цвет шрифта.

Может ли кто-нибудь привести меня по правильному пути, пожалуйста.

Jquery

function edit_addon (div_id) {  
    $("#"+div_id).attr ('contentEditable', true) 
      .css ('color','#F00') 
      .css ('cursor','Text') 
      ; 

} 

HTML

<div id="34" ondblclick="javascript:edit_addon(34)">Editable Text</div> 

Спасибо,

Answer 1

Самый простой способ будет динамически добавлять пролеты с индивидом в DIV и просто изменить цвет текущего диапазона. Вот основная идея:

$(".Editable").dblclick(function() { 
    var words = $(this).text().split(" "); 
    var result = ""; 
    for (var i=0; i<words.length; i++) { 
     result.append("<span class='word'>" + words[i] + "</span>"); 
    } 
    $(this).innerHTML = result; 
} 

#CSS 

span.word:hover { color: #0f0; } 

Answer 2

Это должно работать для вас. В общем, намного проще дать вашим элементам класс, а затем в функции ready(здесь кратко). вы можете настроить любые динамические аспекты страницы.

<style type="text/css"> 
    .Word { color:#F00;cursor:text;padding:20px; } 
</style> 
<script type="text/javascript"> 
    $(function() { 
     $("div.Editable").each(function() { 
      var elem = $(this), 
       text = elem.text(), 
       words = text.split(" "), 
       innerHtml = "<span>" + words.join("</span>&nbsp;<span>") + "</span>"; 
      elem.html(innerHtml); 
     }); 
     $("div.Editable span").live("dblclick", function (evt) { 
      $(this) 
      .attr({ contentEditable: true }) 
      .addClass("Word"); 
     }).live("mouseout", function() { 
      var elem = $(this); 

      elem 
      .attr({ contentEditable: false }) 
      .removeClass("Word"); 

      var text = elem.text(), 
       words = text.split(" "), 
       innerHtml = "<span>" + words.join("</span>&nbsp;<span>") + "</span>"; 

      elem.replaceWith($(innerHtml)); 
     }); 
    }); 
</script> 

<div id="Editable34" class="Editable"> 
    Editable Editable Editable 
</div>