У меня проблема с попыткой динамического изменения содержимого элемента DIV.DIV содержит ряд элементов, и я хочу, чтобы последний клон изменил некоторую информацию.
function add_ele_wrong(id){
var id_c = 'c'+id;
var id_n = 'c'+(id+1);
$('#'+id_c+'f1').parent().after( $('#'+id_c+'f1').parent().clone()[0].outerHTML.replace(RegExp(id_c, 'g'),id_n) );
}
function add_ele(id){
var id_c = 'c'+id;
var id_n = 'c'+(id+1);
$('#'+id_c+'f1').parent().after( ' '+$('#'+id_c+'f1').parent().clone()[0].outerHTML.replace(RegExp(id_c, 'g'),id_n) );
}
#container {
display: inline-block;
width: 50%;
border: 1px solid black;
word-wrap: break-word;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id=container >
<span id=c1 class=chapter style="white-space:nowrap;" >
<span id="c1f1" onClick="add_ele(1);">These work 1</span>
-
<span id="c1f2" onClick="add_ele_wrong(1);">These don't work 2</span>
</span>
<span id=c2 class=chapter style="white-space:nowrap;" >
<span id="c2f1" onClick="add_ele(2);">These work 3</span>
-
<span id="c2f2" onClick="add_ele_wrong(2);">These don't work 4</span>
</span>
</div>
«Исходные» отрезки глав остаются внутри div после ограничения ширины, но когда я добавляю новый «c3», он остается »связан с c2, не оборачивая (и выходя в div), и то же самое для c4 и т. д.
Я использую какую-то неправильную инструкцию CSS или JQ?
Спасибо за предложения.
РЕДАКТИРОВАТЬ.Благодаря misorude я решил проблему, и, следуя его предложению, я изменил вопрос о вставке сниппета с правильным и неправильным решением.
EDIT 2. Я обнаружил, что если вы этого не сделаетеЕсли вы хотите вставить пробел между элементами, вы должны установить свойства отображения элементов CSS для inline-block и word-wrap работает в любом случае.