Question

我有一个引导下拉列表，用户选择“过去”，“此”或“下一步”。

<div class="btn-group dropup three" role="group">
  <button type="button" class="btn btn-default dropdown-toggle" id="TPN" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  This
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu fullwidth">
    <li><a onclick="setPast()">Past</a></li>
    <li><a onclick="setThis()">This</a></li>
    <li><a onclick="setNext()">Next</a></li>
  </ul> 
</div>

单击某个选项时，它会调用相应的功能来更改文本打开按钮。例如：

function setPast(){
   $('#TPN').text("Past");
}

但是，此功能会删除span标记

<span class="caret"></span>

我无法弄清楚如何添加此范围。我试过了：

$('#TPN').append("<span class="caret"></span>");

和

$("TNP").text('new-text').append($('<span></span>').addClass('caret'));

如何添加此范围，或者更好的是，我该怎样做才能防止它被删除？

Answer 1

将文字放在另一个范围内。

  <button type="button" class="btn btn-default dropdown-toggle" id="TPN" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="text">This</span>
    <span class="caret"></span>
  </button>

小提琴：https://jsfiddle.net/udzztobp/2/

Answer 2

或者上面的答案，如果你想重新添加插入符号，请更改：

$('#TPN').append("<span class="caret"></span>");

到此：

$('#TPN').append("<span class='caret'></span>");

Answer 3

如果您对文本的内容有非常严格的控制（特别是您知道文本永远不会包含其他HTML），您可以随时使用正则表达式和.html() replacer function：

$('#TPN').html(function(i, oldHtml) {
    return oldHtml.replace(/^[^<]+/, 'new text');
});

Answer 4

我觉得我需要添加：使用普通的JS，您可以非常非常轻松地执行此操作，而无需在之后重新设置范围或修改HTML：elem.childNodes访问文本节点 [还有]。

var elem = document.getElementById('TPN');
elem.childNodes[0].textContent = 'Past';

至于下拉菜单，您可以简化：

function setText(e) {
  var target = e.target,
      txtNode = document.getElementById('TPN').childNodes[0];
  if (target.nodeName === 'A')
    txtNode.textContent = target.textContent;
}

var menu = document.getElementsByClassName('dropdown-menu')[0];
menu.addEventListener('click', setText, false);

在HTML中只需：

<ul class="dropdown-menu fullwidth">
    <li><a>Past</a></li>
    <li><a>This</a></li>
    <li><a>Next</a></li>
</ul>

更改元素文本但在jQuery中保留内部跨度（或添加跨度）

4 个答案: