Question

我在尝试动态修改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( '&nbsp'+$('#'+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>
    &nbsp;-&nbsp;
    <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>
    &nbsp;-&nbsp;
    <span id="c2f2" onClick="add_ele_wrong(2);">These don't work 4</span>
  </span>
</div>

“原始”一章的跨度很好地保持在div的宽度范围内，但是当我添加一个新的“ c3”时，它保持“连接”状态，而c2没有环绕（并进入div），并且是对于“ c4”，依此类推。

我使用了错误的CSS或JQ指令？

感谢您的建议。

编辑。感谢misorude，我解决了这个问题，并按照他的建议，提出了插入正确和错误解决方案的代码。

编辑2.我发现，如果您不想在元素之间插入空格，则必须将元素的CSS显示属性设置为行内阻止和自动换行。

将元素插入div丢失了自动换行属性

0 个答案: