2014-12-01 2 views
-1

У меня есть такой код,Создание новых тегов пролетных в другие охватывают

<div> 
    <b>Hello</b> 
    <span id=x class=highlight_red> 
     how are 
     <span id=y class=highlight_blue> you John?</span> 
    </span> 
</div> 

Теперь, например, с JQuery или JavaScript, я хочу, чтобы установить новый тег диапазона на текст «ты» (http://jsfiddle.net/kgw57v3e/)

<div> 
    <b>Hello</b> 
    <span id=x class=highlight_red> 
     how 
     <span id=z class=highlight_yellow>are 
     <span id=y class=highlight_blue> you</span> John?</span> 
    </span> 
</div> 

Проблема в том, что пролет #z закроется после строки «Джон?» а не после «вы». Есть ли способ решить эту проблему в javascript или jquery? (это пример, если возможно иметь решение, работающее динамически с другими контекстами).

Спасибо.

+0

Я думаю, вы неверно истолковываете то, что здесь происходит. Это ожидаемое поведение специфичности - CSS, применяемый к внутреннему элементу, имеет приоритет. Пролеты не закрываются там, где цвет меняется. Используйте это для проверки документа своего браузера. – isherwood

+0

Пространства не могут пересекаться друг с другом подобным образом. Они могут вставляться только друг в друга. Поэтому, чтобы моделировать это поведение, вам нужно будет добавить span 'z' вокруг 'are' и отдельный вокруг 'you', внутри span 'y'. Вы можете сделать это, используя JavaScript, конечно, но это не будет тривиально, и я не знаю ни одного из его решения. И, очевидно, вы не можете иметь элементы с одним и тем же идентификатором ('z'), но это небольшая деталь реализации. – GolezTrol

+0

Спасибо @GolezTrol, мне нравится ваше решение и да, это непросто. – user3115251

ответ

0
$('#y').after("<span id='z'>bla bla</span>");